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