본문 바로가기
학원/복기

[HTML] 제출이벤트 / label태그 / textarea 태그 / select 태그 / datalist 태그 / fieldset 태그

조가루 2023. 5. 28. 17:27

form 태그에는 입력태그외에 제출 이벤트를 발생시키는 태그가 반드시 존재해야한다. 
제출이벤트를 발생해야만 form 태그가 실행되어 웹프로그램을 요청해 입력값을 전달할 수 있기 때문이다.


input 태그의 type 속성값을 [submit]으로 설정하여 태그(버튼)을 클릭한 경우 제출이벤트가 발생한다.  

<input type="submit" value="회원가입">

또는 button 태그의 type 속성값을 [submit]으로 설정하여 태그(버튼)을 클릭한 경우에도 제출이벤트를 발생시킬 수 있다.

<button type="submit">회원가입</button>


form 태그의 하위태그에 입력태그의 입력값을 초기화 처리하는 기능의 태그를 작성할 수 있다.
→ 초기화 이벤트 (Reset Event) 
input 태그의 type 속성값을 [reset]으로 설정하여 태그(버튼)을 클릭한 경우 초기화 이벤트가 발생한다. 

<input type="reset" value="다시입력">


또는 button 태그의 type 속성값을 [reset]으로 설정하면 태그(버튼)을 클릭한 경우 마찬가지로 초기화 이벤트가 발생한다.

<button type="reset">다시입력</button>

label 태그 

: 입력태그에 입력촛점(Focus)을 제공하기 위한 태그
 

label태그는 input태그의 의미를 정의하기 위한 태그이다. label 태그는 input 태그를 제어할 수 있도록 돕는 역할을 한다.

label 태그를 사용하지 않으면 입력태그를 직접 클릭해야만 입력 촛점을 제공한다. >> checkbox 영역을 직접 눌러야한다.

<h3>label 태그 미사용</h3>
	<p>이름 : <input type="text" name="name"></p>
	<p>취미 :
		<input type="checkbox" name="hobby" value="낚시">낚시&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" value="등산">등산&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" value="독서">독서&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" value="게임">게임&nbsp;&nbsp;
	</p>


label 태그 사용

방법1) label을 입력태그와 묶어서 사용  >> 텍스트 영역을 클릭해도 checkbox가 작동한다.

<h3>label 태그 사용</h3>
	<p><label>이름 : <input type="text" name="name"></label></p>
	<p>취미 :
		<label><input type="checkbox" name="hobby" value="낚시">낚시</label>&nbsp;&nbsp;	
		<label><input type="checkbox" name="hobby" value="등산">등산</label>&nbsp;&nbsp;	
		<label><input type="checkbox" name="hobby" value="독서">독서</label>&nbsp;&nbsp;	
		<label><input type="checkbox" name="hobby" value="게임">게임</label>&nbsp;&nbsp;
	</p>


방법2) label을 따로 잡고 id와 for을 이용해 사용 (for,id는 이름을 같게 써준다.) 

for에 들어가는 value와 id를 연결해준다. >> 텍스트 영역을 클릭해도 checkbox가 작동한다.

<p>취미 :
		<input type="checkbox" name="hobby" id="hobby1" value="낚시"><label for="hobby1">낚시</label>&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" id="hobby2" value="등산"><label for="hobby2">등산</label>&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" id="hobby3" value="독서"><label for="hobby3">독서</label>&nbsp;&nbsp;	
		<input type="checkbox" name="hobby" id="hobby4" value="게임"><label for="hobby4">게임</label>&nbsp;&nbsp;
	</p>


for 속성 : 태그를 구분하는 식별자를 속성값으로 설정
→ label 태그를 클릭한 경우 속성값으로 설정된 태그에 입력촛점 제공

textarea 태그

 : 다수행의 문자값을 입력받기 위한 태그 - 입력태그

→ 태그내용이 입력태그의 초기값으로 설정된다. 

type="text" 의 경우, 한 줄의 텍스트 입력 창을 만든다. textarea 태그는 여러줄의 텍스트를 입력하는 창을 만든다. 

  • rows 속성 : 입력태그의 행의 갯수(높이)를 속성값으로 설정
  • cols 속성 : 입력태그의 열의 갯수(폭)를 속성값으로 설정
<body>
	<h1>textarea 태그</h1>
	<hr>
	<form method="post">
	<table>
		<tr>
			<td>장점</td>
			<td>
				<textarea rows="5" cols="80" name="good">장점이 아주 많습니다.</textarea>
			</td>
		</tr>
		<tr>
			<td>단점</td>
			<td>
				<textarea rows="5" cols="80" name="bad"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2"><button type="submit">제출</button></td>
		</tr>
	</table>
	</form>
</body>

select 태그 

: 목록에서 아이템을 선택하여 값을 입력받기 위한 태그 - 입력태그

기본적으로 하나의 아이템만 선택되지만 select 태그의 multiple 속성을 사용하면 다중값 선택도 가능하다. 

multiple 속성 : 여러개의 아이템을 선택하기 위한 속성 (속성값 생략이 가능하다.)
→ 하위태그 : option, optgroup 

  • option 태그 : 선택 가능한 아이템을 제공하여 값을 전달하는 태그 
    • selected 속성 : 우선 선택을 기능을 제공하는 속성 - 속성값 생략 가능 
  • optgroup 태그 : option 태그로 표현된 아이템을 하나의 그룹으로 표현하기 위한 태그
    • label 속성 : 그룹의 이름을 속성값으로 설정
<body>
	<h1>select 태그</h1>
	<hr>
	<form method="post">
		<label for ="class">학교</label>
		<select id="class" name="class">
   		<!-- <select id="class" name="class" multiple="multiple">-->
   			<optgroup label="공과대">
				<option value="arch">건축공학과</option>
				<option value="macinic">기계공학과</option>
				<option value="indust">산업공학과</option>
				<option value="computer" selected="selected">컴퓨터공학과</option>
				<option value="chemical">화학공학과</option>
			</optgroup>
				<optgroup label="인문대">
				<option value="history">사학과</option>
				<option value="lang">어문학과</option>
				<option value="philo">철학과</option>
			</optgroup>
		</select>
		
		<button type="submit">제출</button>
	</form>
</body>

<option> 태그와 </option> 태그 사이의 텍스트는 단지 브라우저가 드롭다운 리스트에 표시할 내용이며, value 속성값은 폼을 제출할 때 서버로 보내지는 값이다. 만약 value 속성이 명시되지 않는다면, 해당 값은 <option> 요소 내의 텍스트로 자동 설정된다.

참고: http://www.tcpschool.com/html-tag-attrs/option-value

datalist 태그

: input 태그에 입력 가능한 값을 제공하기 위한 태그

값을 추천(권장)하는 기능이다. 따라서 다른 값을 입력해도 상관 없으며, 자동완성기능과 유사하다고 생각하면 된다.

datalist 태그는 input 태그와 함께 사용해야 한다.
- list 속성 : datalist 태그의 식별자를 속성값으로 설정

<body>
	<h1>datalist 태그</h1>
	<form method="post">
		<label for="subject">좋아하는 과목 : </label>
		<input type="text" name="subject" id="subject" list="subjectlist"> 
		<datalist id="subjectlist">
			<option>JAVA</option>
			<option>JSP</option>
			<option>SPRING</option>
		</datalist>
		<button type="submit">제출</button>
	</form>
</body>

fieldset 태그 : 입력태그의 영역을 구분해준다. (영역을 만들어 준다.)

→ 하위태그 : legend, input, textarea, select 등 

  • legend 태그 : 입력태그의 영역에 대한 제목을 제공해준다.
<body>
	<h1>fieldset 태그</h1>
	<hr>
	<h3>회원가입</h3>
	<form method="post">
	<fieldset>
		<legend>인증정보</legend>
		<ul>
			<li>아이디 : <input type="text" name="id"></li>
			<li>비밀번호 : <input type="password" name="passwd"></li>
		</ul>
	</fieldset>
	<fieldset>
		<legend>개인정보</legend>
		<ul>
			<li>이름 : <input type="text" name="name"></li>
			<li>이메일 : <input type="text" name="email"></li>
			<li>전화번호 : <input type="text" name="phone"></li>
		</ul>
	</fieldset>
	<div>
		<button type="submit">회원가입</button>
		<button type="reset">다시입력</button>
	</div>
	</form>
</body>

 

저작자표시 (새창열림)

'학원 > 복기' 카테고리의 다른 글

[CSS] 선택자(Selector)  (0) 2023.05.28
[CSS] CSS 언어란? / style 태그 / CSS의 상속 / HTML 문서에 스타일 시트를 적용하는 방법  (0) 2023.05.28
[HTML] 리퀘스트 메세지 / form 태그 / input 태그  (0) 2023.05.25
[HTML] HTML 언어란? / HTML 태그와 속성  (0) 2023.05.24
[HTML] HTTP 요청과 응답  (0) 2023.05.24

'학원/복기' Related Articles

티스토리툴바