HTML input이 아닌 입력 태그

텍스트 공간의 크기 변경

<!-- 텍스트 공간(textarea) -->
<fieldset>
	<legend>텍스트공간의 크기 변경</legend>
	<textarea rows="10" cols="20" style="resize: none;"> 
								-resize : none 사이즈변경 불가
	</textarea>
	<textarea style="width: 100px; height: 50px; resize: both;"> 
								-resize: both 사이즈변경 가능(defult값)
	</textarea>
	<textarea style="width: 100px; height: 50px; resize: vertical;">
								-resize: vertical 위 아래로만 변경가능
	</textarea>
	<br>
	<textarea style="width: 100px; height: 50px; resize: horizontal;">
								-resize: horizontal 좌우로만 변경가능
	</textarea>
</fieldset>

resize 속성의 값(텍스트공간의 크기 변경)
1. none : 사이즈변경 불가(크기고정)
2. both : 수평 수직 변경 허용(defult값)
3. vertical : 수평 변경 허용
4. horizontal : 수직 변경 허용

선택 목록

<fieldset>
	<legend>선택 목록</legend>
	<h3>관심 주제를 한가지 선택하시오.</h3>
	<form>
		<select name="subject" multiple size="3"><!-- multiple : 다중선택가능 -->
			<option value="1">HTML5</option>
			<option value="2">CSS3</option>
			<option value="3" selected>Javascript</option>
							<!-- selected:초기값(이미선택해져있는메뉴) -->
			<option value="4">JQuery</option>
		</select>
		<p/>
		<input type="submit">
	</form>
</fieldset>

같이 사용하는 속성   
     multiple : 다중 항목을 선택할 수 있도록 지정. (안할시 한줄로만 표시되어있음)
                공간이 항목의 개수만큼 확장   
     size : 다중 선택일 경우 화면에 출력할 항목의 개수를 지정
     selected : 초기 선택 항목 지정

그룹별 선택 항목

<fieldset>
	<legend>그룹별 선택 항목</legend>
	전공분야 선택 :
	<select name="major">
		<optgroup laberl="Computer">
			<option>software</option>
			<option>Robot</option>
			<option>System</option>
		</optgroup>
		<optgroup laberl="Language">
			<option>Korea</option>
			<option>English</option>
			<option>China</option>
		</optgroup>
	</select>
</fieldset>

optgroup 으로 옵션의 그룹을 묶어준다 (laberl 별로 나눔)

option 으로 옵션의 항목지정

입력된 글자가 포함된 항목만 보여주기

<!-- 입력된 글자가 포함된 항목만 보여주기 (datalist) -->
<fieldset>
	<legend>datalist</legend>
	<input type="text" list="browsers" name="sel">
	<datalist id="browsers">
		<option value="Explorer">Explorer</option>
		<option value="Chrome">Chrome</option>
		<option value="Firefox">Firefox</option>
	</datalist>
</fieldset>

브라우저 리스트로 어떤 브라우저를 선택할지 정하게 한다.

label과 input의 연결

<!-- 두 태그의 연동 (label) -->
<fieldset>
	<legend>Label과 Input의 연결</legend>
	<label for="name">이름: </label>
	<input type="text" name="name" id="name"><br>
	전공 : 
	<input type="text" name="magor"><br>
</fieldset>

for= "name"으로 이름의 태그를 연동시킨다.

<fieldset>
	<legend>입력태그의 속성들</legend>
	<p>힌트 출력:
	<input type="text" name="n1" placeholder="입력하세요.">
	</p>
	<p>읽기 전용:
	<input type="text" name="n2" readonly>
	</p>
	<p>자동 포커스:
	<input type="text" name="n3" autofocus>
	</p>
</fieldset>

placeholder : 회색폰트 (입력하기전 어떤문구 나타낼지 쓸때 유용)

readonly : 입력하는란이 아닌 읽기만 가능한 용도

autofocus : 오토포커스 말그대로 이미 입력받을준비가 되어있음
(처음 입력받아야하는 곳에 자주쓰임)