티스토리 뷰
<html>
<head>
<title>form-1</title>
</head>
<body>
<hr>
<h1>form-1</h1>
<h2>form요소의 input값들</h2>
<form action="test.jsp" method="post">
<hr>
<p>
input상자의 설명글을 label태그로 표시하고
label에는 for속성의 값을, input에는 id속성의 값을 서로 일치시켜서 설명글과 상자를 연결시킴.<br>
minlength="n" / maxlength="n" 속성으로 입력값의 최소/최대 길이를 제한할 수 있다.
size="n"속성으로 상자의 길이를 지정 가능.
</p>
<h3>input type = "text" 주관식. 한 줄 글상자</h3>
<label for="nm">성명</label> <input type = "text" id="nm">
<label for="idd">ID</label> <input type = "text" id="idd">
<h3>2. input type="password" 주관식. 글상자</h3>
<label for="ide">주민번호 뒷자리</label> <input type="password" id="ide" maxlength="7" size="7">
<h3>3. input type="radio" 단일선택형 객관식. 라디오버튼</h3>
<p><b>초기값으로 지정할 항목에는 checked(checked="checked") 추가</b>
<br>단일선택이 하려면 같은 질문하의 항목들끼리 name 속성의 값을 서로 일치시킴
</p>
<p>이벤트 소식을 받으시겠습니까?
<!--name="event"로 맞춰놓아야 하나만 선택 가능-->
<input type="radio" id="ev-y" name="event" checked> <label for="ev-y">네</label>
<input type="radio" id="ev-n" name="event"> <label for="ev-n">아니오</label>
</p>
<h3>4. input type="checkbox" 다중선택형 객관식. 체크박스</h3>
<p><b>초기값으로 지정할 항목에는 checked(checked="checked") 추가</b></p>
<p>출근시 이용하는 수단은? <br>
<label> <input type="checkbox" checked="checked">자가용</label>
<label> <input type="checkbox"> 지하철</label>
<label> <input type="checkbox" checked> 버스</label>
<label> <input type="checkbox"> 자전거</label>
<label> <input type="checkbox"> 도보</label>
<input type="checkbox"
</p>
<h3>5. textarea ... /textarea 주관식. 큰 글상자
<br><small>(cols="n"/rows="n" 가로/세로크기 지정 가능)</small>
</h3>
<p>입사동기를 서술하시오. <br>
<textarea cols="80" rows="10"> </textarea>
</p>
<h3>6. select ... /select 공간절약형 객관식. 펼침목록, 드롭다운리스트</h3>
<p>
특정 option에 selected(selected="selected")를 추가하여 초기값으로 지정할 수 있고 <br>
select에 multiple(multiple="multiple")을 추가하여 다중선택형으로 지정할 수 있고<br>
select에 size="n"를 추가하여 n개의 항목이 보이는 상자형으로 만들 수 있고<br>
서로 연관된 option들을 optgroup으로 묶어서 그룹화하여 표현 가능. <br>
(label속성으로 그룹의 주제, 제목을 표현)
</p>
<p>출근시 소요 시간은? (selected 추가)<br>
<select>
<option>10분이내</option>
<option>10분~30분이내</option>
<option selected>30분~1시간이내</option>
<option>1시간~1시간30분이내</option>
<option>1시간30분~2시간이내</option>
<option>2시간~2시간30분이내</option>
<option>2시간30분~3시간이내</option>
<option>3시간이상</option>
</select>
</p>
<p>업무시 애로 사항 관련 상담 희망 시간은? (multiple 추가)<br>
<select multiple>
<option selected>9시~9시30분</option>
<option>9시30분~10시</option>
<option>10시~10시30분</option>
<option>10시30분~11시</option>
<option>11시~11시30분</option>
<option>11시30분~12시</option>
<option>12시~12시30분</option>
<option>12시30분~1시</option>
<option>1시~1시30분</option>
<option>1시30분~2시</option>
<option>2시~2시30분</option>
<option>2시30분~3시</option>
</select>
</p>
<p>노무 관련 상담 희망 시간은? (size 추가)<br>
<select size="5">
<option selected>9시~9시30분</option>
<option>9시30분~10시</option>
<option>10시~10시30분</option>
<option>10시30분~11시</option>
<option>11시~11시30분</option>
<option>11시30분~12시</option>
<option>12시~12시30분</option>
<option>12시30분~1시</option>
<option>1시~1시30분</option>
<option>1시30분~2시</option>
<option>2시~2시30분</option>
<option>2시30분~3시</option>
</select>
</p>
<p>현재 거주지역은? (optgroup 추가)<br>
<select>
<optgroup label="1구">
<option>1동</option>
<option>2동</option>
<option>3동</option>
<option>4동</option>
<option selected>동</option>
</optgroup>
<optgroup label="2구">
<option>1동</option>
<option>2동</option>
<option>3동</option>
<option>4동</option>
</optgroup>
</select>
</p>
<h3>5. input type=" " 파일 전송용</h3>
<label>증명사진 <input type="file"></label>
<h3>6. input type="hidden" 사용자에게 보이지 않는 정보 전송용</h3>
<input type="hidden" value="vip">
<hr>
<h3>7. input type="submit/reset/button" 전송/취소/일반 버튼</h3>
<input type="submit" value="전송">
<input type="reset" value="취소"> <br>
<input type="button" value="click" onclick="alert('hi')">
<h3>8. input type="image" 전송용 이미지</h3>
<input type="image" src="face.gif" width="30">
<h3>9. button ... 전송 (type="reset/button" 취소나 일반 버튼일 때 추가) 버튼</h3>
<p>시작과 종료 태그 사이에 다른 태그 추가 가능
글자를 꾸미거나 이미지를 추가하거나 아이콘을 포함할 수 있음</p>
<button>전송</button>
<button type="reset">취소</button> <br>
<button type="button" onclick="alert('hello')">
<b>click</b> <img src="face.gif"></button>
</form>
</body>
</html>'배운 것 기록 > web' 카테고리의 다른 글
| [CSS] CSS 문법, 적용 방식 (0) | 2022.06.27 |
|---|---|
| [html] html5 추가 input 속성 (0) | 2022.05.23 |
| [js] 객체 기능 함수 이벤트(input) (0) | 2022.05.13 |
| [js] 내장객체 입력, 목록 (0) | 2022.05.11 |
| [html] 테이블 셀 합치기 (0) | 2022.05.09 |
댓글