[Html] select optgroup / input 타입 / textarea / iframe

 

< optgroup >

 

- select 그룹화하여 나타냄

 

<p>팀 회의 희망 시간은?
	<select>
		<optgroup label="오전">
			<option>1교시</option>
			<option>2교시</option>
			<option>3교시</option>
			<option>4교시</option>
		</optgroup>
		<optgroup label="오후">	
			<option>5교시</option>
			<option>6교시</option>
			<option>7교시</option>
			<option>8교시</option>
		</optgroup>
	</select>
</p>

 

 

 

< label과 input 연결 >

 

- label 태그에는 for와 input 태그에는 id로 동일하게 지정하여 연결

 

<label for="bday">생년월일 </label>
<input type="date"  min="1900-01-01" max="2200-12-31" id="bday">

 

 

 

< input 타입 >

 

① range

 

<input type="range">

 

 

 

 

② color

 

<input type="color">

 

 

 

 

 

③ search

 

- 검색용 상자

- 겉보기엔 input의 text 타입처럼 보이지만 X 버튼이 등장한다 

 

<input type="search">

 

 

 

 

④ file

 

- 파일을 직접 올리는 것이 가능

- 파일 전송용

 

<input type="file">

 

 

 

 

< html5에 추가된 input type의 속성들 >

 

 

① maxlength / minlength

 

- 최대치 / 최소치 지정

 

<label for="id">ID</label> <input type="text" maxlength="8" id="id">
<input type="text" minlength="2">

 

 

 

② autofocus

 

- 해당 요소에 자동 포커싱

 

<input type="text" autofocus="autofocus">

 

 

③ autocomplete

 

- on : 자동완성 켜짐

 

 

<input type="text" autocomplete="on">

 

 

④ placeholder

 

- 요소에 대한 설명- 입력예시를 보여줌- 값을 입력하면 사라짐

 

 

<li><input type="text" placeholder="영문,숫자,특수문자 조합 8자이내">

 

 

 

 

⑤ required

 

- 필수입력요소로 지정

 

<input type="text" required="required">

 

 

⑥ readonly

 

- 읽기전용- 수정 불가

 

 

<input type="text" readonly="readonly" value="silver">

 

 

⑦ disabled

 

- 사용불가한 요소로 지정- 색깔이 회색빛으로 변함- 커서도 적용안됨

 

<input type="text" disabled="disabled">

 

 

< textarea >

 

- 큰 글상자 의미

 

<textarea rows="6" cols="70"> 자기소개를 해주세요. </textarea>

 · 6줄짜리, 70개 글자입력 가능한 크기로 작성

 

 

< iframe >

 

- 웹브라우저에서 관리할 때 대부분 사용

- 브라우저의 특정 공간을 추가해서 다른 내용을 불러올 수 있다

- 사이트 주소, 웹문서, 이미지, 동영상, 텍스트파일

 

 

<iframe src="form-1.html" width="800" height="600" name="if01"></iframe>
<iframe src="https://www.itwill.co.kr"></iframe>
<iframe src="img/pic_trulli.jpg"></iframe>
<iframe src="img/sky.mp4"></iframe>
<iframe src="text.txt" width="100" height="100"></iframe>

 

 

 

 

① 링크와 name

 

- 링크를 클릭했을 때 iframe에 나오도록 설정하기 위해서 name 속성 사용

- iframe에 name을 지정해주고 링크 태그에 target을 name과 일치 시켜줌

 

<iframe src="" width="500" height="400" name="if02"></iframe>
<nav>
	<a href="img/pic_trulli.jpg" target="if02">photo</a>
	<a href="img/sky.mp4" target="if02">video</a>
</nav>

 

 

실행시켰을 때 첫화면

photo 링크 클릭했을 때

video 링크 클릭했을 때