HTML 공부 - 양식(form)

HTML <form> 요소는 사용자로부터 정보를 수집하는 역할을 하는데, 다양한 입력 양식을 적용할 수 있다. 본 포스팅은 다양한 HTML 사용자 입력 양식을 쉽게 정리해놓는 용도로 작성했다.

사용자가 <form> 양식을 제출한다는 것

<form>을 통해 사용자 입력 정보를 수집할 때 action 및 method 속성을 통해 그 정보를 어디로 어떻게 보낼 것인지 지정해놓을 수가 있다. action에는 그 정보를 받는 곳이 어디인지 URL을 적어주면 되고, method 속성은 해당 정보가 전송된 후 수행할 작업, 즉 HTTP 메서드들이 지정된다. POST, GET, PUT, DELETE 이런 것들.

예를 들면 이렇게 쓸 수 있다.

<form action="/index1.html" method="PUT">
</form>

그리고 이 <form>태그 사이에 사용자 입력 양식을 받는 <input> 요소를 넣어주면 되는 거다. 예를 들면 이런 식으로.

<form method="post" action="http://server1">
  이름:
  <input type="text" name="username">
  <br/>
  나이:
  <input type="text" name="age">
  <br/>
  <input type="submit" value="제출하기">
</form>

이제 저 위에 쓰인 <input> 요소의 사용법을 봐야 한다.

<input> 요소

인풋 요소는 일단 닫는 태그가 없이 그냥 <input>만으로 바로 사용이 가능하다는 특징이 있고, 그 안에 type 속성을 통해 어떤 형태로 인풋을 받을지 지정하게 된다.

type 속성

어떤 형태의 인풋인지 지정해주는 건데 종류가 다양하다. 아래서 하나씩 살펴보겠지만 일단 아래와 같은 것들이 있다는 것 정도만 알고 가자.

• checkbox: 체크박스. 선택하거나 말거나 둘 중 하나
• radio: 라디오버튼. 여러개 선택지 중 택 1 하는 거
• number: 숫자만 입력 가능
• range: 슬라이드 바. 최소-최대 값 사이에서 선택
• text: 텍스트
• password: 텍스트와 비슷한데 입력하면 * 또는 ㆍ 처럼 화면에 마스킹되어 보임.

type에 따라 넣어줄 수 있는 속성들이 추가로 있다. 예를 들면 max, min, maxlength, minlength, pattern(정규표현식)

그리고 이외에도 input 요소는 아니지만 사용자의 입력을 받는 방식이 있다. 이것도 아래에서 다 다룰 예정.

• textarea: 텍스트 박스. 크기를 정할 수 있다.
• datalist: 텍스트 입력란이지만 이미 지정된 옵션이 있으면 검색결과처럼 보여줌.
• select: 드롭다운.

name 속성

어쨌든 <input> 태그로 사용자 입력을 받을 때 또 중요한 속성이 바로 name이다. form이 데이터를 보내려면 이를 KEY-VALUE 쌍에 넣을 수 있어야 하는데. name 속성이 바로 KEY에 해당하고, 사용자가 입력한 값이 VALUE에 해당한다. 반드시 name이 있어야만 제출이 된다.

required 속성

어떤 값을 필수로 받도록 지정하려면 <input> 태그 안에 required라고만 적어주면 된다. 예를 들면 이렇게.

<input type="password" name="password" required >

<input type="submit">

그리고 <input>의 type 속성으로 마지막 단추가 submit이다. type="submit"이라 적어주면 <form> 태그 내 action, method 속성에 적어준대로 어딘가에 어떤 행위를 요청한다.

이제부터 다양한 종류의 인풋 폼을 알아보자.

1) checkbox

체크박스 타입. 선택하거나 말거나 둘 중 하나다.

<input type="checkbox" name="menu" value="bacon"> 베이컨🥓<br>
<input type="checkbox" name="menu" value="eggs"> 달걀 🍳<br>

• name 속성으로 같은 값을 넣었는데, 같은 주제에 대해 값을 받기 위해 이렇게 한 거고, 그냥 다 따로 넣어줘도 상관 없다.
• value 속성에는 해당 옵션을 선택했을 때 받을 값을 적어주면 된다.

2) radio

라디오버튼은 체크박스와 비슷해보일 수 있으나 name 속성에 같은 값을 넣어주면 여러 선택지 중 하나만 택할 수 있게 된다.

<input type="radio" name="q1" value="option1" id="option1" />
<label for="option1">옵션1</label>
<input type="radio" name="q1" value="option2" id="option2"/>
<label for="option2">옵션2</label>
<input type="radio" name="q1" value="option3" id="option3"/>
<label for="option3">옵션3</label>

여기서 input 속성으로 id가 들어갔다는 것과 label 요소가 들어간 것을 확인해야 한다.

라디오버튼 선택지마다 id를 부여했는데, 이는 레이블을 달아주기 위함이다. 해당 선택지에 대한 레이블을 달아주려면 <label>요소를 사용하고 그 안에 for 속성을 사용해 선택지에 적은 id를 적어주면 된다. 단순히 매칭을 하는 용도이고, 브라우저에서 화면에서 해당 레이블을 클릭하면 인풋 값을 강조해준다.

3) number

숫자만 받을 수 있다. 이때 max, min, step 등의 속성을 추가할 수 있다는 거다.

<label for="num">숫자</label>
<input id="num" name="num" type="number" max=100 min=0 step=5 >

숫자 입력후 오른쪽에 화살표가 생기는데 step 속성을 지정하면 클릭 시 증가하거나 감소하는 간격을 조정할 수 있다. (솔직히 별로 쓸 일은 없을 듯.)

4) range

range 타입은 슬라이더 같은 건데, 눈금을 지정할 수 있다. 예시 보면 금방 이해된다.

<label for="scale">슬라이더</label>
<input id="scale" type="range" name="scale" min=0 max=100 step=10 value=20>

value를 넣어두면 시작점을 정할 수 있고, 아니면 중간에서 시작된다.

5) text

이번엔 텍스트 타입. (예시가 단순하기 때문에 required 속성도 추가해봤다.)

<label for="user-name">이름</label>
<input type="text" name="user-name" id="user-name" required>

6) password

이번엔 비밀번호 타입. 텍스트랑 같고 마스킹 되는 차이만 있다고 보면 된다.

<label for="user-password">비밀번호</label>
<input type="password" name="user-password" id="user-password" required>

이제부터는 input 요소는 아니지만 특수한 입력 폼들에 대해 알아봐야 한다. textarea, datalist, select가 있다.

<textarea> 요소

textarea 요소는 여러 줄의 텍스트를 입력하기 위한 상자를 만들어준다. 이때 높이와 너비를 결정하는 rows, cols 속성을 지원한다. (실제로 브라우저에서 렌더링 하면 사용자가 직접 텍스트 상자 우하단에 마우스 드래그를 해서 크기를 줄일 수도 있긴 하다.)

그리고 input과 달리 여는 태그와 닫는 태그가 모두 있다. 예를 들면 아래와 같이 쓸 수 있다.

<hr>
<label for="box">텍스트 상자</label>
<br>
<textarea id="box" name="box" rows=5 cols=30></textarea>
<hr>

5행 30열짜리 사이즈로 만들어봤다.

<datalist> 요소

이건 텍스트 받을 때 예시를 검색할 수 있도록 도와주는 거다. 아래와 같이 <option> 요소를 안에 넣어서 사용한다.

<label for="city">도시</label>
<input type="text" list="cities" id="city" name="city">
  <datalist id="cities">
  <option value="서울"></option>
  <option value="대전"></option>
  <option value="대구"></option>
  <option value="부산"></option>
</datalist>

<select> 요소

select 요소는 드롭다운 리스트 중에 선택하는 기능이다. 아래와 같이 <option> 요소를 안에 넣어서 사용한다.

<select name="city">
  <option value="option1">서울</option>
  <option value="option2">대전</option>
  <option value="option3">대구</option>
  <option value="option4">부산</option>
</select>

HTML <form> 정리 끝.