0513 HTML - input이 아닌 입력 태그

텍스트 공간(textarea)

resize 속성의 값	텍스트 공간의 크기 변경
none	변경 불가
both	수직/수평 변경 허용
vertical	수직
horizontal	수평
*** 처음에 보일 때의 크기만 지정됨

<fieldset>
	<legend>글쓰기</legend>
	<textarea rows="10" cols="50" style="resize : none;"></textarea>
	<br>
	<textarea style="width : 200px; height:150px; resize:vertical;">출력되는 초기 값.</textarea>
</fieldset>

 

선택 목록(select, option)

multiple	다중 항목을 선택할 수 있도록 지정.
	공간이 옵션 항목 개수만큼 확장.
size	다중 선택일 경우 화면에 출력할 항목의 개수를 지정
selected	초기 선택 항목 지정

<fieldset>
	<legend>선택 목록</legend>
	<h3>관심 주제를 한 가지 선택하시오.</h3>
	<form>
		<select name="subject" multiple size="3">
			<option value="1">HTML5</option>
			<option value="2">CSS3</option>
			<option value="3" selected>Javascript</option>
			<option value="4">jQuery</option>
		</select>
		<p/>
		<input type="submit">
	</form>
</fieldset>

 

소제목이 있는 선택 목록

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

 

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

<fieldset>
	<legend>datalist</legend>
	<input type="text" list="browsers" name="sel">
	<datalist id="browsers">
		<option value="Explorer">Internet Explorer</option>
		<option value="Chrome">Chrome</option>
		<option value="Firefox">Firefox</option>
	</datalist>
</fieldset>

x를 검색했을 때 x가 포함되어있는 Explorer와 Firefox만 확인 가능함.

 

두 태그의 연동(label)

<fieldset>
	<legend>Label과 input의 연결</legend>
	<label for="name1">이름 : </label>
	<input type="text" name="name" id="name1"><br>
	전공 : 
	<input type="text" name="major"><br>
</fieldset>

label의 속성으로 for에 "id명"을 적어두면 텍스트부분을 누르지않고 "이름"을 눌러도 바로 텍스트 부분으로 이동하여 입력이 가능하게 됨.

 

입력 태그의 주요 속성

<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	values와 다른점은 전송되는 데이터가 없음.
	다른 텍스트 입력시 문구가 자동으로 사라짐
readonly	disable과 다른 점은 작성하는 것만 막혀있고, 회색이지는 않음.
autofocus	순서가 마지막이라도 텍스트 부분이 제일 먼저 실행되어 있음.