[42-5 HTML] form, label, input, type

<form> </form>

HTML form 태그는 웹사이트 사용자들이 입력한 값을 모으는 기능을 구현한다.

 

attribute 속성 :action, method

element 요소: label, input

 

<label></label>

라벨링을 한다는 뜻과 같다. 관련된 설명을 화면에 보여주는 기능이다.

웹사이트를 보는 사용자가 값을 입력할 때 어떤 내용을 입력해야하는지 정보를 주기 때문에 유용하다.

 

<input>

- HTML input Types

웹 사이트에서 사용자가 입력하는 데이터를 받을 수 있는 대화형 박스를 생성한다.

이 대화형 박스는 사용자가 입력값을 받는 방식에 따라

다양한 타입(text, radiobutton, checkbox, file, data, range, password...)이 존재한다. 

몇 가지 타입을 살펴보자.

1) type="text"

텍스트 입력을 받는다.

<h3>💌Contact me!</h3>
<form class="" action="index.html" method="post">
  <label for="nickname">Nickname</label>
  <input type="text" name="nickname" value="이름을 입력하세요">
</form>

 

 

2) type="submit"

submit는 제출하다는 뜻이다. 사용자가 입력값을 수기로 작성하여 제출한다.

여기서 name 속성(attribute)는 반드시 필요하며, name속성이 없을 시에 제출되지 않는다.

<h3>💌Contact me!</h3>
<form class="" action="action_page.php" method="post">
  <label for="nickname">Nickname</label>
  <input type="text" name="nickname" value="이름을 입력하세요">
  <input type="submit" value="제출">
</form>

제출 버튼을 누르면 아래의 페이지로 이동한다.

 

 

3) type="radio"

여러개 선택지 중 하나를 선택하는, 라디오 버튼

<h3> 자신의 레벨을 선택하세요</h3>
<form class="" action="index.html" method="post">
  <input type="radio" name="level" value="초급">
  <label for="level">초급</label>
  <input type="radio" name="level" value="중급">
  <label for="level">중급</label>
  <input type="radio" name="level" value="고급">
  <label for="level">고급</label>
</form>

 

 

4) type="checkbox"

여러 선택지 중 0개 이상을 선택하는, 체크박스

<h3> 자신의 레벨을 선택하세요</h3>
<form class="" action="index.html" method="post">
  <input type="checkbox" name="level" value="초급">
  <label for="level">초급</label>
  <input type="checkbox" name="level" value="중급">
  <label for="level">중급</label>
  <input type="checkbox" name="level" value="고급">
  <label for="level">고급</label>
</form>

 

더 많은 타입을 알고 싶다면 아래 문서를 참고하자.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

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

HTML Input Types

 

 

- HTML input Attributes

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

HTML Input Attributes