[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>