input tag


TEXT

한줄끼리 텍스트 입력 창입니다

size : 입력창의 크기 조정, maxlength: 사용자가 입력할 수 있는 최대 글자수


PASSWORD

FILE

파일 선택 버튼"> input tag

input tag


TEXT

한줄끼리 텍스트 입력 창입니다

size : 입력창의 크기 조정, maxlength: 사용자가 입력할 수 있는 최대 글자수


PASSWORD

FILE

파일 선택 버튼"> input tag

input tag


TEXT

한줄끼리 텍스트 입력 창입니다

size : 입력창의 크기 조정, maxlength: 사용자가 입력할 수 있는 최대 글자수


PASSWORD

FILE

파일 선택 버튼"> 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input tag</title>
</head>
<body>
<!--
	# input 태그
	- form 태그 안에 사용되는 가장 중요한 요소로 사용자로부터 데이터를 입력받기 위해서 사용.
	- <input type="" name="" value="">
	  * type  : 입력 태그의 유형 지정.
	  	name  : 서버로 전달되는 이름 지정 ( 사용자 임의 지정 )
	  	value : 입력 태그의 초기값을 설정 ( 사용자 변경 가능 )
	  	
	 # label 태그
	 - input 태그에 text label을 지정.
	 - for 속성을 사용하여 관련 요소들을 묶는 역할. 
	   이 때, 관련 요소의 id 속성과 동일해야 함.
	  
-->
	<h2>input tag</h2>
	<br>
	<form action ="#">
		<fieldset>
			<legend> TEXT
			</legend>
			<label for="username"> 이름 </label>
			<input type="text" name="username" size="20" maxlength="10"/>
			<p>한줄끼리 텍스트 입력 창입니다</p>
			<p>size : 입력창의 크기 조정, maxlength: 사용자가 입력할 수 있는 최대 글자수</p>
		</fieldset>
		<br>
		<fieldset>
			<legend> PASSWORD
			</legend>
			<label for="userpw">비밀번호</label>
			<input type="password" name="userpw" id="userpw" >
		</fieldset>
		<br>
		<fieldset>
			<legend> FILE
			</legend>
			<input type="file" name="filedown" id="filedown/">
			<p>파일 선택 버튼을 제공합니다.</p>
		</fieldset>
		<br>
		<fieldset>
			<legend> checkbox 
			</legend>
			<input type="checkbox" id="apple" name="fruit_1" value="사과" checked/>
			<label for="apple"></label>
			<input type="checkbox" id="banana" name="fruit_2" value="바나나">
			<label for="banana"></label>
			<input type="checkbox" id="mango" name="fruit_3" value="망고">
			<label for="mango"></label>
			<p> 여러 항목을 선택할 수 있습니다.</p>
			<p> checked 속성을 사용해서 기본 선택값을 설정할 수 있습니다</p>
		</fieldset>
		<br>
		<fieldset>
			<legend> radio
			</legend>
			<input type="radio" id="male" name="gender" value="m" checked>
			<label for="male">남성</label>
			<input type="radio" id="female" name="gender" value="f">
			<label for="male">여성</label>
			<p>radio는 하나의 그룹이고, 한 그룹에서 radio 하나만 선택 가능.</p>
			<p>같은 그룹에 있는 항목들은 name이 같아야 합니다.</p>
		</fieldset>
		<br>
		<fieldset>
			<legend>hidden</legend>
			<input type="hidden" id="hidden" name="secret" value="비밀">
		</fieldset>
		<fieldset>
			<legend>button</legend>
			<label for="user_btn">버튼</label>
			<input type="button" id="user_btn" name="userBtn" value="click">
			<p>value 속성을 사용해서 button 이름을 설정.</p>
			<p>자체 별도의 기능은 없고, 스크립트에 연결해서 사용.</p>
		</fieldset>
		<br>
		
		<input type="submit" value="제출"/>
	</form>
</body>
</html>