HTML - Form 요소

<form> 태그

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

<form name="profile" action="/action_page.php" method="get">
  <input type="text" name="id" placeholder="form형식 예시">
</form>

✔ action 속성 : form을 보낼 목적지 주소
✔ method 속성 : form을 제출할 때 사용할 HTTP 메서드 (post, get)

<label> 태그

input과 쌍을 이루어 사용자 인터페이스 항목의 설명을 나타낸다.

• for 속성에는 input의 id를 넣어준다 ( 명시적 작성 방식 )

<label for="age"></label>
<input type="number" id="age">

• label의 자식요소에 input을 넣어준다 ( 암시적 작성 방식)

<label>
	나이 :
	<input type="number" id="age">
</label>

나이 :

<input> 태그

input의 유형은 type 속성에 따라 분류한다.

• text : 기본 텍스트를 입력하는 input 생성
• password : 비밀번호를 입력하는 input
• email : 이메일을 입력하는 input
• tel : 전화번호 입력하는 input
• number : 숫자를 입력하는 input
• range : 범위로 숫자를 입력하는 input
• date : 시간을 제외한 년/월/일을 입력하는 input
• submit : form을 제출할 수 있는 input
• reset : form을 초기화 할 수 있는 input
• checkbox : 체크박스를 선택할 수 있는 input

<input> 의 속성

<input type="text" name="id" placeholder="id를 입력하세요" autocomplete="off" required>

✔ name 속성 : Form 데이터 상에서 구별 가능하게 함
✔ placeholder 속성 : 어떤 값이 들어가야하는지 사용자에게 알려줌
✔ autocomplete 속성 : on인 경우 자동 완성기능을 제공함
✔ required 속성 : 필수로 입력해야 form 제출이 가능함
✔ disabled 속성 : input 값에 사용자가 접근 못하게하여 input 자체가 비활성화됨
✔ readonly 속성 : 읽기전용으로 input 값이 수정이 안됨
✔ min,max 속성 : type이 number, range인 경우 설정 가능
✔ step 속성 : type이 number, range인 경우 step수만큼 증감하게 설정 가능

<button> 태그

클릭 가능한 버튼을 나타낸다.submit, reset, button 3가지 type이 존재한다.

<button type="button">
    Button
</button>

Button

❗ input을 사용하지 않고 button을 사용하는 이유?
button 과 input의 차이점은 자식요소의 유무이다. input은 자식 요소를 가질 수 없고 button은 자식 요소를 가질 수 있다. 따라서 button 요소는 input 요소보다 스타일을 적용하기 훨씬 수월하다

<select> 태그

옵션 메뉴를 제공하는 컨트롤을 나타낸다. 후보군으로는 <option>태그를 사용한다.

<form>
    <label for="movie"> 좋아하는 영화 : </label>
	<select id="movie" name="movie">
		<option value="toystory" selected>토이스토리</option>
		<option value="simpson">심슨</option>
		<option value="insideout">인사이드아웃</option>
	</select>
</form>

좋아하는 영화 : 토이스토리 심슨 인사이드아웃

✔ value 속성 : 서버에는 value 값으로 제출된다. value 속성이 없으면 내부의 값이 value 값이 됨
✔ selected 속성 : 디폴트 값을 설정한다.
✔ <optgroup> 으로 옵션을 그룹화 할 수 있고 label로 그룹명 설정이 가능하다

<textarea> 태그

멀티라인 일반 텍스트 편집 컨트롤을 나타낸다.

<form>
   <p>textarea :
     <textarea cols="50" rows="3" 
               placeholder="default">입력하세요.</textarea>
   </p>
 </form>

textarea :

✔ rows cols 속성으로 텍스트 크기 조절할 수 있음