[HTML] #2-3 HTML 파헤치기 3 : 폼 만들어보기

1. 입력 양식?

 

 웹사이트에 무언가를 입력하는 공간을 만드는 것을 배워보려 한다.

 이러한 공간들에는 무엇이 있을까.

 로그인을 할 때 아이디와 비밀번호를 치는 공간일 수도 있고, 검색창의 빈 공간일 수도 있을 것이다.

 이렇게 사용자들이 무언가의 값을 입력할 수록 해주는 것을 form이라고 부른다.

 

 이 입력양식(하단부터는 폼이라고 부르려 한다)을 구성하는 것들은 아래와 같다.

 - 요소(element) : <<table> <img> <a> <audio> 등

 - 속성(property, attribute) : width, height, border, src 등

 

 이러한 요소들 중 이 폼을 컨트롤하는 요소들에 대해 알아보자.

 

 

2. 다양한 폼 컨트롤 요소, INPUT

 

 1) button 요소

  input은 폼 안에 다양한 요소들을 삽입하기 위한 명령어이다.

  먼저 버튼을 만들어보자!

 

  아래와 같이 input의 종류(type)를 버튼이라고 명령해주면 버튼이 완성된다.

  <input type="button">

 

  이렇게 하면 빈 버튼이 생성이 된다.

  그러면 버튼에 이름을 붙이려면 어떻게 해야할까.

  아래와 같이 value 값을 지정해주면 된다.

 

  <input type="button" value="로그인">

 

   위의 명령어를 그대로 적용하면 아래처럼 된다.

 

   

  이름 없는 버튼

 

   

   로그인이라 이름을 붙인 버튼

 

   

  Hello World ^_^

 

  버튼을 눌러보자, 아무런 반응을 하지 않는다(당연하게도).

  그리고 웹디자이너들은 여기까지가 작업의 영역이다.

  하지만 개발자들은 여기에 추가적인 요소를 부여한다.

 

 2) submit, reset 요소

  또 다른 명령어들도 살펴보자.

 

  <input type="submit" value="전송">

  <input type="reset" value="취소">

 

  위의 코드를 입력하면 버튼과 같이

,

의 버튼이 만들어진다.

  하지만 이 버튼들은 submit, reset에 해당되는 기능이 지정되어있는 버튼들이다.

  submit은 사용자가 입력한 정보를 서버에 전송이 된다.

  reset은 사용자가 입력한 정보를 취소(초기화) 시키는 기능이 있다.

 

 *

  <button> 명령어도 가능하다.

  <button>회원가입</button> 명령어를 입력하면 인풋 버튼으로 회원가입을 만든 것과 같은 결과가 나온다.

 

   

 

  이 때 버튼이란 명령어는 type="button"과 type="submit"의 명령어가 혼합되어 표출된다.

 

 3) radio, checkbox 요소

  이 두 명령어는 체크박스를 만들 때 사용한다.

  <input type="radio">

  <input type="checkbox">

  radio는 한 가지만 선택하게 하고, checkbox는 다지선을 할 수 있게 해준다.

 

> 동그란 라디오

> 네모난 체크박스

 

  이처럼 인풋 명령어의 유형은 굉장히 많기 때문에 다 외운다기보단 필요할 때마다 W3Schools에서 찾아보는 것을 추천한다.

https://www.w3schools.com/html/html_form_input_types.asp

HTML Input Types

 

 

3. 로그인 페이지를 만들어보자

 

 이제 본격적으로 로그인 페이지를 만들어보려한다.

 로그인 페이지를 만들기 위해선 우선 아이디와 비밀번호가 들어갈 공간이 필요하겠다.

 눈으로 보이진 않지만 가상의 네모난 공간이 웹 사이트에 자리를 잡는 것이다.

 

 이 공간을 만드는 것이 바로 <form> 명령어이다.

 사용자들은 form의 공간에서 정보를 입력하고, 웹사이트는 form 단위로 서버로 정보를 전송한다.

 

 이 form 명령어 안에 지금까지 배웠던 <table> 명령어로 공간을 구획하고, <input> 명령어로 필요한 기능들을 넣어보자.

 우선 만들어진 결과물부터 출력해본다.

만든 로그인 창

  위의 결과물은 아래의 코드로부터 출력되었다.

        <form>
            <table border="1">

            <tr>

                <th>아이디</th>

                <td><input type="text"></td>

                <td rowspan="2">

                    <input type="submit" value="로그인">

                </td>

            </tr>

            <tr>

                <th>비밀번호</th>

                <td><input type="password"></td>

            </tr>

            </table>

        </form>

 

  위의 코드를 잘 살펴보면 구획을 어떻게 설정하고, 그 안에 input type 코드로 버튼과 기능을 구현했는지 알 수 있다.

  여기까지 만들었다면 이제 아이디 저장 체크박스, 회원가입, 아이디/비밀번호 찾기 버튼까지 만들어보자.

 

  마찬가지로 출력된 결과물부터 사진으로 보아보자.

로그인 창이 완성되었다.

  위의 결과물은 아래의 코드로부터 출력되었다.

            <tr>

                <td colspan="3">

                    <input type="checkbox">ID저장

                    <input type="button" value="회원가입">

                    <input type="button" value="아이디/비밀번호찾기">

                </td>

            </tr>

 

  위의 코드를 추가하여 버튼을 생성했다.

  하나씩 코드를 살펴보며 어떻게 만들어졌는지 이해해보자.

 

  여기서 위의 submit 이 들어간 전송의 버튼을 누르면 이 폼의 내용들이 전송이 된다.

  다른 폼의 내용은 전혀 전송되지 않는다.

 

 

4. 폼을 만들 때 주의사항

 

 한 페이지에 여러가지의 폼이 들어갈 수? 있다!

 하지만 위에서도 말했듯 정보는 폼 단위로 넘어간다.

 그 말인 즉슨, 테이블 안에 테이블이 들어갈 수 있는 테이블과는 달리 폼 안에 또 다른 폼은 들어갈 수 없다.

 다른 폼을 만들고 싶다면 폼을 닫고, 새로운 폼 명령어를 열어서 작성하면 된다.

 

 - 잘못된 예)

  <form>

    <form></form>

  </form>

 

 - 올바른 예)

  <form> </form>

  <form> </form>

 

 

5. 회원가입 페이지를 만들어보자

 

 로그인 페이지를 만들었으니 회원가입 페이지도 만들어보자.

 이 회원가입 페이지를 만들 때는 아래와 같이 form에 식별자를 붙여보려한다.

 <form id="memfrm" name="memfrm">

 아이디와 이름을 정해준다는 것은 이 폼이 어떤 폼인지 구분해두겠다는 뜻이다.

 (!!!이 때 id와 name에는 절대 한글을 사용하면 안된다!!!)

 여기선 memfrm이란 이름으로 가상으로 지어보았다.

 

 여기서 id는 JavaScript나 jQuery 접근시 주로 사용이 되고(#만 입력하면 편하게 연동되기 때문에)

 name은 Backend단에서 접근시 주로 사용된다.

 그렇기에 id와 name은 같은 이름을 주는 것이 작업하는 것에 있어서 편리하다.

 

 1) 이름

 먼저 이름을 넣으려 한다.

이름 :           
<input type="text" autofocus>

 이름 : 을 입력하고, input type을 텍스트로 지정해주었다.

 여기서 autofocus라는 기능을 사용했다.

 이 기능은 이 화면이 출력되면 자동으로 커서가 미리 들어가있도록 해주는 기능이다.

 * autofocus 일일이 하나씩 치면 좋은 게 아니다. ctrl + space를 눌러보자. 명령어들이 쫘라락 나오는 것을 볼 수 있다.

 

 2) 아이디와 비밀번호

 다음은 아이디와 비밀번호이다.

아이디 :           
<input type="text"         
            id="userid"     
            name="userid"
            size="10" 
            maxlength="5"
            placeholder="아이디를입력해주세요"
            required>
<input type="button" value="중복확인">

 - id와 name : 이 아이디가 입력되는 공간은 식별자를 만들어서 관리하려한다. 이 때 위에서 했듯 id와 name을 알아보기 쉬운 이름으로 지정해두면 된다. 여기선 userid라는 이름으로 지정해두었다.

 - size : 아이디를 칠 텍스트 상자의 크기를 결정한다.

 - maxlength : 글자수를 제한해준다. 5일때는 5글자까지만 아이디를 적을 수 있다.

 - placehorder : 글자를 적기 전에 칸에 뜨는 설명문이다. 커서를 올리면 사라진다.

 - required : 이 필드는 값이 서버로 전송되기 전에 반드시 값이 입력되어 있어야 함을 나타내는 명령어다. required 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같다.

    < checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url >

 

 3) 우편번호

 우편번호는 오픈 소스를 활용하여 삽입하는 것이 대부분이다.

 우리는 카카오의 오픈 소스를 활용하려 한다.

우편번호 :
<input type="text" size="5" readonly>
<input type="button" value="주소찾기">

 우편번호를 입력하는 칸을 만들려 하는데, 오픈 소스로 불러올 것이기 때문에 사용자가 값을 입력하지 않게 하려고 한다.

 그럴 때 사용하는 명령어가 readonly 이다.

 그리고 주소 찾기 버튼을 만든 뒤 나중에 오픈 소스와 연동을 하려 한다.

 

 4) 나이

 나이는 간략하게 10대, 20대, 30대로만 구분지어두려 한다.

나이 :           
<input type="radio" name="age" value="10">10대           
<input type="radio" name="age" value="20">20대           
<input type="radio" name="age" value="30">30대    

 이 때 한 가지만 선택하게 하기 위해 radio 명령어를 사용한다.

 그런데 여러개의 radio 버튼을 하나의 그룹으로 인식시켜야지 여러 개의 라디오 버튼 중 1개만 선택해야한다는 것을 말할 수 있다(만약에 그룹핑을 하지 않는다면 각각의 하나의 버튼이 개별 버튼으로 인식되기 때문이다.

 그래서 각 명령어에 name을 붙여주었다.

 

 추가로 value 값도 지정해두었다.

 이렇게 값을 지정해두면 age 라는 변수(백앤드 계열의 개념이므로 모른다면 그런게 있구나, 라고 생각하고 앞으로 또 배워가면 된다)에 값이 들어가게 된다.

 

 5) 성별

성별 :           
<input type="radio" name="gender" value="m">남           
<input type="radio" name="gender" value="f" checked>여

 성별도 나이와 동일하게 코드를 구성했다.

 여기서 처음 보는 명령어가 등장한다.

 checked인데, 이것은 사이트가 뜨자마자 기본값으로 선택이 되어있게 하는 명령어이다.

 

 6) 취미

 취미는 체크 박스로 만들려한다.

 다양한 취미를 선택해도 되므로 radio가 아니라 checkbox 명령어를 사용했다.

취미 :           
<input type="checkbox" id="movie" name="movie" value="mv">영화           
<input type="checkbox" id="cook" name="cook" value="c" checked>요리           
<input type="checkbox" id="book" name="book" value="b">독서

 

 

6. 여는 태그와 닫는 태그가 같이 있는 폼컨트롤 요소

 

 1) button

  위에서 언급했듯 <button> 요소로 버튼을 만들 수 있다.

 

 2) select

  수많은 선택지 중 하나를 선택할 수 있는 선택창을 만드는 요소이다.

  생년월일을 선택하는 코드를 만들어보려한다.

            <select id="myyear" name="myyear">

                <option value="2022">2022년</option>

                <option value="2021" selected>2021년</option>

                <option value="2020">2020년</option>

            </select>

  select 명령어로 값에 대한 식별자를 우선 구분한 뒤 들어갈 옵션의 값들을 배정해준다.

  여기서 selected는 위의 checked와 마찬가지로 먼저 선택되어있게 하는 기본값을 설정해준다.

  출력 결과물은 아래와 같다.

 

 2-2) multiple

  또한 다중 선택을 할 수 있는 선택창도 만들 수 있다.

            <select id="mymonth" name="mymonth" multiple>
                <option value="1">1월</option>
                <option value="2">2월</option>
                <option value="3">3월</option>
                <option value="4">4월</option>
                <option value="5">5월</option>
            </select>

  이렇게 select 명령어문 안에 multiple을 입력하면 ctrl을 누르고 선택하면 다중 선택을 가능하게 해준다.

다중 선택이 되어있는 모습

 

 3) textarea

  폼 안에 긴 글자를 입력하고 싶을 때 사용하는 요소이다.

배송 메세지 :
<textarea cols="50" rows="3" maxlength="200">200글자 이내로 입력해주세요</textarea>

  cols 와 rows 로 가로 세로 길이를 지정해주고 maxlength로 최대 길이를 지정해준다.

출력된 모습