[HTML] form태그 하위 태그들(input, select, radio, checkbox, textarea)

<form> 하위 태그들

- <form> 관련 태그의 속성값이 숫자를 가지면 거의 글자(문자)수

1. <input> 태그

- 인라인 태그

- 단독 태그

- type 속성 : 입력 컨트롤의 역할(형태) 지정

- name 속성 : 식별자(*** 서버로 전송할 때 데이터의 키 역할)

- id 속성 : 식별자

- class 속성 : 식별자

- size 속성 : 텍스트 박스의 너비

- maxlength 속성 : 입력 문자열의 최대 길이

- value 속성 : 입력값(텍스트 박스의 현재 값)

- title 속성 : 풍선 도움말(모든 태그 적용 가능)

- readonly 속성 : 플래그 타입. 읽기 전용

- disabled 속성 : 플래그 타입. 사용을 안 하겠습니다. 전원 Off

암호 상자, Masked Text Box

 - 모든 속성이 일반 텍스트와 동일

 - value 속성은 사용 금지

--> 암호 입력 : <input type="password">

개발자용 텍스트 박스

<input type="hidden" name="seq" value="100">

전송 버튼

<input type="submit" title="클릭하면 내용을 전송합니다." value="보내기"><br>

같은 <form>내의 모든 컨트롤을 초기화 상태로 되돌리는 버튼

<input type="reset" value="초기화"><br>

2. 다중 라인 텍스트 박스

- 쌍태그

- 대부분의 속성은 일반 텍스트와 유사

- value, maxlength, size 속성은 없음

- <textarea>의 영역은 편집기 영역의 성질과 동일(공백 문자열 인식한다)

<textarea rows="10" cols="50" style="resize: none; outline: none;">

3. 체크 박스

- 논리값 입력

 <input type="checkbox" checked>

4. 라디오 버튼

- 2개 이상 같이 사용 > 1개를 선택하는 용도

- 단일 선택

<input type="radio" name="rbAgree"> 동의함 

<input type="radio" name="rbAgree" checked> 동의안함 <br> 

성별 <input type="radio" name="rbGender" id="rbGender1"> <label for="rbGender1">남자</label> 

 <input type="radio" name="rbGender" id="rbGender2"> <label for="rbGender2">여자</label>

5. 셀렉트 박스

- 콤보 박스(Combo Box),드랍 다운 리스트(DropDownList)

- 라디오 버튼과 유사(단일선택)

- multiple(다중 선택)

<select>

<option>강아지</option>

<option selected>고양이</option>

<option>병아리</option>

</select>