HTML | form, input, button, select, datalist, textarea

💻 form

정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획

<form action="" method=""></form>

action 은 정보를 전달하는 주소
method 는 전달 방식

🔈 method?

양식을 제출할 때 사용할 HTTP 메서드.

post: POST 메서드. 양식 데이터를 요청 본문으로 전송합니다.
get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다.
dialog: 양식이 dialog 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.

dialog는 잘 사용하지 않고, post의 경우 민감한 정보로 가려서 보내야할 때, get의 경우 검색창 등 주소에 나타내도 되는 값을 보낼 때 사용한다.

💻 fieldset, legend

form 안의 요소를 fieldset으로 감쌀 수 있다.
legend를 통해 설명을 추가할 수 있고, 이때 legend는 fieldset 최상단에 위치하여야 한다.

<fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K"/>
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster" value="S"/>
    <label for="sasquatch">Sasquatch</label><br/>
  </fieldset>

💻 input

form 내에서 값을 받아 저장할 수 있는 태그

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name1" required minlength="4" maxlength="8"/>

1. 구성요소

1) label

input에 대한 설명을 label로 표현할 수 있다.
따로 쓸 경우 꼭 label for="" 과 input의 id를 통일시켜야 한다.
혹은 label 안에 input을 넣을 수 있어서 표현할 수도 있다.

2) name

name은 전체 폼 데이터에서 해당 코드가 어떤 데이터를 가지고 있는지 구분하기 위해 사용되는 요소이다. 서버와의 통신에서 사용한다.

3) placeholder

폼 내에 입력하여 힌트를 줄 수 있다.

4) step, min, max (=/= minlength)

최소값과 최대값, 값을 바꿀 때 이동할 단위 설정

<input type="number" min="3" max="5" step="2"/>
<input type="range" min="-10" max="10" step="2"/>

range에서, 각 바의 최대값 최소값을 지정하여 범위를 정할 수 있으며, 이동하는 단위와 각 단위의 크기를 정할 수 있다.

4) 기타

• required를 통해 필수로 체크해야 함을 선택할 수 있다.
• minlength 와 maxlength를 통해 길이를 제한할 수 있다.
• autocomplete 을 통해 이전 결과를 불러 와 자동완성을 할 수 있다. (on. off로 조절)
• disabled 를 통해 입력할 수 없도록 만들 수 있다.
• readonly 를 통해 읽기 전용으로 만들 수 있다. 이 경우, value 로 값을 미리 지정해놓고 보여줄 수 있다.

2. 종류

text, password, email, tel, range, date, month, time, checkbox, radio, button 등이 많이 쓰인다.

알아둘 것 1) checkbox

하나의 폼에 여러 개의 체크 박스를 둘 수 있다.
선택 시 주소 창의 name=on 을 통해 알 수 있다.

<label>Checkbox:
  <input type="checkbox" name="check1">
  <input type="checkbox" name="check2">
  <input type="checkbox" name="check3">
</label>

알아둘 것 2) radio

체크 박스와 다르게 하나만 클릭할 수 있는 선택지이다.
단, radio에선 name을 통일해야 하나의 박스로 이해된다. 따라서 value를 통해 서로를 구분할 수 있다.

<label>Radio:
  <input type="radio" name="radio" value="1">
  <input type="radio" name="radio" value="2">
  <input type="radio" name="radio" value="3">

알아둘 것 3) button

기존의 버튼 형식은 아래와 같다.

<button type="submit">submit</button>

하지만 input으로도 버튼을 만들 수 있다.
이때 value 값을 통해 박스 안 글자를 바꿀 수 있다.

<input type="submit" value="제출하기">

또한, button과 reset 도 만들 수 있다.
button은 내용이 없는 빈 버튼이나 value를 설정할 수 있다. 다만 눌러도 변화가 없어 js로 추후에 설정해야 한다.
reset의 경우 폼에 입력된 값을 모두 초기화하는 기능을 가지고 있다.

<input type="button" value="제출">
<input type="reset">

이 외에도 다양한 종류의 input type이 있다. 참고: mdn

❗❗ button 과 input의 비교

input

• 타입에 따라서 버튼 내부에 속성이 기본으로 작성된다. (ex) 제출하기
• 오직 string 타입만 입력할 수 있다.

<input type="submit">
<input type="reset">
<input type="button">

button

• 내용을 따로 작성하지 않으면 타입과 상관없이 빈 버튼으로 제공된다.
• input의 버튼보다 스타일링적인 면에서 수월하다.
• string 타입 외에도 formatting tag나 img icon등을 넣을 수 있다.

<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">button</button>

단, 이미지나 아이콘 등을 넣을 경우 스크린 리더를 사용할 시 내용을 알 수 없으므로 텍스트를 함께 작성해야 한다.

<button type="submit">good 👍</button>

💻 select, datalist

1. select

• value 값을 통해 분류를 할 수 있는데, 값이 명시되어 있지 않을 경우 알아서 그 내용을 value로 생각한다. 따라서 값을 전송하고 싶지 않을 경우 (기본 안내 문구) value="" 를 작성해야 한다.

• required 등을 통해 제한할 수 있다.

• optgroup을 통해 선택요소끼리 나눌 수 있다.

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <optgroup>
  	<option value="dog">Dog</option>
  	<option value="cat">Cat</option>
  </optgroup>
  <optgroup label="소동물">
    <option value="hamster">Hamster</option>
  </optgroup>

</select>

2. datalist

• input과 datalist를 작성한 후 id와 list 태그로 연결하여 사용한다.
• 단독으로 사용할 순 없으며, input에 추천 정답지를 제공하는 역할이다.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

select와 datalist의 차이점

select의 경우 정해진 정답지 중 선택해야 한다.
datalist의 경우 추천만 할 뿐 내용을 선택한 후 수정할 수 있다.
따라서 수정의 필요 유무에 따라 선택하여 사용할 수 있다.

💻 textarea

• input 과 달리 여러 줄을 작성할 수 있고, 빈 요소가 아닌 요소
• rows를 통해 몇 줄을 작성할 지 정할 수 있다.
• cols 를 통해 가로 넓이를 조정할 수 있으나 css의 width를 통해 조절하는 것을 추천.

<label for="story">댓글:</label>

<textarea id="story" name="story" rows="5">
내용을 미리 작성할 수 있다...
</textarea>