⛏️/HTML | CSS
[HTML] 6. Form 태그
defyuil
2023. 8. 25. 17:52
1. input으로 시작하는 폼 요소들
input에 대한 설명문을 label태그로 지정하고 서로 연결해 주려면 label에는 for의 값을, input에는 id의 값을 일치시킴
<h3>1. input type="text" 주관식. 한 줄 글상자</h3>
<p>
최소값을 minlength="n", 최대값을 maxlength="n"으로 지정 가능<br>
상자 길이는 size="n"으로 지정 가능
</p>
<label for="nm">name</label> <input type="text" id="nm" maxlength="20">
<label for="bd">birthday</label> <input type="text" id="bd" size="10">
<h3>2. input type="password" 주관식. 암호 글상자</h3>
<label for="pw"> password </label><input type="password" id="pw" maxlength="12">
<h3>3. testarea ... / testarea 주관식. 큰 글상자</h3>
<textarea cols=100 rows="10">지원동기</textarea>
<h3>4. input type="checkbox" 단일선택형 객관식/체크박스</h3>
<p>체크박스와 라디오버튼은 초기값으로 지정할 항목에 checked(checked="checked")를 추가함</p>
<p>
자신 있는 과목은?<br>
<label> <input type="checkbox" checked="checked">html</label>
<label> <input type="checkbox" >jsp</label>
<label> <input type="checkbox" checked="checked">java</label>
<label> <input type="checkbox" >db</label>
<!-- label로 input을 감싸주면 연결됨-->
</p>
<h3>5. input type="radio" 단일선택형 객관식/라디오버튼</h3>
<p>단일선택형이 되려면 선택지들끼리 name의 값을 일치시킴</p>
<p>
<label> <input type="radio" >html</label>
<label> <input type="radio" >jsp</label>
<label> <input type="radio" >java</label>
<label> <input type="radio" >db</label>
</p>
<h3>6. input type="submit/reset/button" 전송/취소/일반 버튼</h3>
<input type="submit" value="전송"> <input type="reset" value="취소 ">
<input type="button" value="버튼" onclick="alert('why?')">
<h3>6-1. button... /button 전송용 버튼(취소/일반)</h3>
<p> button 태그는 전송용이 기본</p>
<p>
<button>전송</button>
<button type="reset">취소</button>
<button type="button">눌러봐
<img src="img/123.png" width="80" onclick="alert('냥')">
</button>
</p>
<h3>7. input type="image" 전송용 이미지</h3>
<p>이미지 경로 src로 지정</p>
<label> 야옹이 기운 솟아라~
<input type="image" src="img/123.png" width="100">
</label>
<h3>8. input type="file" 파일 전송용</h3>
<p>경로는 src로 지정</p>
<label>
<input type="file">
</label>
<h3>9. select .../select 공간절약형 객관식. 펼침목록(드롭 다운 리스트)</h3>
<p> [9-1] 팀별 회의 시간은?
<select>
<option>1교시</option>
<option>2교시</option>
<option>3교시</option>
<option>4교시</option>
<option >5교시</option>
<option>6교시</option>
<option>7교시</option>
<option>8교시</option>
</select>
</p>
초기값으로 지정할 항목에 selected(selected="selected")를 추가함<br>
<p>[9-2] 팀별 회의 시간은?
<select>
<option>1교시</option>
<option>2교시</option>
<option>3교시</option>
<option>4교시</option>
<option selected>5교시</option>
<option>6교시</option>
<option>7교시</option>
<option>8교시</option>
</select>
</p>
<p> [9-3] 다중선택형 multiple(multiple="multiple")를 추가함<br>
팀별 회의 시간은?
<select multiple="">
<option>1교시</option>
<option>2교시</option>
<option>3교시</option>
<option>4교시</option>
<option >5교시</option>
<option>6교시</option>
<option>7교시</option>
<option>8교시</option>
</select>
</p>
<p> [9-4] 형태를 상자형으로 size="n"을 추가함<br>
팀별 회의 시간은?
<select size="5">
<option>1교시</option>
<option>2교시</option>
<option>3교시</option>
<option>4교시</option>
<option >5교시</option>
<option>6교시</option>
<option>7교시</option>
<option>8교시</option>
</select>
</p>
<p> [9-5] 항목들을 그룹화<br>
팀별 회의 시간은?
<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>
<p> [9-6] <br>
팀별 회의 시간은?
<select>
<option>1교시</option>
<option>2교시</option>
<option>3교시</option>
<option>4교시</option>
<option >5교시</option>
<option>6교시</option>
<option>7교시</option>
<option>8교시</option>
</select>
</p>
<html>
<head>
<title>iframe</title>
</head>
<body>
<h1>iframe -
<small>브라우저의 특정영역 설정 후 다른 내용 넣기</small></h1>
<p><iframe src="보여질 내용"> ... </iframe> <br>
iframe의 크기는 width="n" height="n"로 지정하고<br>
iframe에는 <b>name="abc"</b>를 링크 a에는 <b>target="abc"</b>로
서로 값을 일치시켜 iframe안에 링크를 열 수 있음
</p>
<h2>iframe안에 불러올 수 있는 것들</h2>
2. 웹문서 <iframe src="test08.htm">
iframe 지원 안하는 브라우저 사용자용 메세지</iframe> <br>
3. 이미지
<iframe src="123.png" width="640" height="360"> </iframe> <br>
4. 동영상
<iframe src="frog.mp4" width="640" height="430"></iframe> <br>
5. 텍스트파일
<iframe src="text.txt" width="400" height="300"></iframe><br>
<hr>
<h2>iframe안에 링크 열기</h2>
<nav>
<a href="test01.htm" target="html-box">test01.htm</a>
<a href="test02.htm" target="html-box">test02.htm</a>
<a href="test03.htm" target="html-box">test03.htm</a>
<a href="test04.htm" target="html-box">test04.htm</a>
<a href="test05.htm" target="html-box">test05.htm</a>
<a href="test06.htm" target="html-box">test06.htm</a>
<a href="test07.htm" target="html-box">test07.htm</a>
<a href="test08.htm" target="html-box">test08.htm</a>
</nav>
<iframe src="test01.htm" name="html-box" width="1000" height="600" >
</iframe>
</body>
</html>