HTML form태그란?

📘 form 태그란?

form 태그는 사용자가 입력한 내용을 서버로 보낼 때 사용한다.

다양한 사이트에서 내린 form 태그 정의

javatpoint

It defines an HTML form to enter inputs by the used side.
form 태그는 사용자 측의 입력을 입력하기위한 html 형식을 정의합니다.

w3schools

The <form> tag is used to create an HTML form for user input.
<form> 태그는 사용자 입력을 위한 HTML 양식을 만드는 데 사용됩니다.

developer.mozilla

The <form> HTML element represents a document section containing 
interactive controls for submitting information.
HTML 요소 <form>은 정보 제출을 위한 반응형 컨트롤이 포함된 문서 섹션을 나타냅니다.

geeksforgeeks

Forms are required to take input from the user who visits the website
form은 웹사이트를 방문하는 사용자로부터 입력을 받기 위해 양식입니다.

왜 다 다르지..?

종합해서 다시 정의를 얘기해보면

form 태그는 서버에 정보전달하기 위해 사용하는 태그인데

사용자 측에서 정보를 입력하는 html 형식이다.

정도로 정의할 수 있을것 같습니다.

📘 form 태그의 속성

name 속성 : 폼의 이름을 지정
action 속성 : 폼 데이터를 처리할 웹 서버 스크립트의 주소 지정
method 속성 : 폼 데이터를 웹 서버로 전송하는 형식

<form action="" method="get">
  <input type="text" value="test text" name="text">
  <input type="submit" value="제출">
</form>

예시

체크박스 :
숨겨진 입력 :
라디오 버튼 :
색상 :
이미지..? :
텍스트 :
비번 :
이메일 :
URL :
전화번호 :
색상 :
날짜 :
월 :
주 :
시간 :
지역 시간 :
숫자 :
범위 :

<form action="input.jsp" method="post">
체크박스 : <input type="checkbox" name="userid"> <br>
숨겨진 입력 : <input type="hidden" name="userid"> <br>
라디오 버튼 : <input type="radio" name="userid"> <br>
색상 : <input type="color" name="userid"> <br>
이미지..? : <input type="image" name="userid"> <br>
텍스트 : <input type="text" name="userid"> <br>
비번 : <input type="password" name="email" /><br>
이메일 : <input type="email" name="email" /><br>
URL : <input type="url" name="url" /><br>
전화번호 :<input type="tel" name="tel" /><br>
색상 : <input type="color" name="color" /><br>
날짜 : <input type="date" name="date" /><br>
월 : <input type="month" name="month" /><br>
주 : <input type="week" name="week" /><br>
시간 : <input type="time" name="time" /><br>
지역 시간 : <input type="datetime-local" name="localdatetime" /><br>
숫자 : <input type="number" name="number" min="1" max="10" step="2"/><br>
범위 : <input type="range" name="range" min="1" max="10" step="2" /><br>
<input type="submit" value="제출">
<input type="reset" value="초기화">
</form>

select 요소, fieldset 태그

selcet 요소

메뉴를 표시하고 사용자가 선택할 수 있다.

 <select name="cars">
    <option value="hyundai" selected>현대자동차</option>
    <option value="kia">기아자동차</option>
  </select>

fieldset 태그

입력요소를 그룹핑하는데 사용하는 태그이다.

legent 태그를 사용하면 그룹에 제목을 붙일 수 있다.

자동차

BMW Benz 현대자동차 기아자동차

<form action="">
<fieldset>
  <legend>자동차</legend>
  <select name="cars">
    <option value="bmw">BMW</option>
    <option value="benz">Benz</option>
    <option value="hyundai" selected>현대자동차</option>
    <option value="kia">기아자동차</option>
  </select>
</fieldset>
</form>