코밍이의 하루

[HTML5] 사용자 입력을 위한 <input> 태그 본문

웹언어 공부/HTML5

[HTML5] 사용자 입력을 위한 <input> 태그

코밍이 2021. 8. 19. 02:41

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 주요 문법

1) <input> 태그

- 사용자가 입력하는 부분 만들 때 사용

 

2) id 속성 사용하기

- 최소한 1개 이상의 문자여야 하고 공백이 없어야 사용 가능

-

3) input 태그의 type 속성

유형 설명
hidden 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐
text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣음
search 검색 상자를 넣음
tel 전화번호 입력 필드를 넣음
url URL 주소를 입력할 수 있는 필드를 넣음
email 메일 주소를 입력할 수 있는 필드를 넣음
password 비밀번호를 입력할 수 있는 필드를 넣음
datetime 국제 표준시(UTC)로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)를 넣음
datetime-local 사용자가 있는 지역을 기준으로 날짜와 시간(연,월,일,시,분,초,분할 초)를 넣음
date 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣음
month 사용자 지역을 기준으로 날짜(연, 월)를 넣음
week 사용자 지역을 기준으로 날짜(연, 주)를 넣음
time 사용자 지역을 기준으로 시간(시,분,초,분할 초)를 넣음
number 숫자를 조절할 수 있는 화살표를 넣음
range 숫자를 조절할 수 있는 슬라이드 막대를 넣음
color 색상 표를 넣음
checkbox 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣음
radio 주어진 항목에서 1개만 선택 가능한 라디오 버튼을 넣음
file 파일을 첨부할 수 있는 버튼을 넣음
submit 서버 전송 버튼을 넣음
image submit 버튼 대신 사용할 이미지를 넣음
reset 리셋 버튼을 넣음
button 버튼을 넣음

 

4) 텍스트 필드의 속성

속성 설명
name 텍스트 필드를 구별할 수 있도록 이름을 붙임
size 텍스트 필드 길이 지정
value - 텍스트 필드 부분에 표시될 내용
- 사용하지 않을 경우 빈 테스트 필드 표시
maxlength 테스트 필드에 입력할 수 있는 최대 문자 개수 지정

 

5) range 타입의 속성

속성 설명
min - 필드에 입력할 수 있는 최솟값 지정
- 기본 최솟값 0
max - 필드에 입력할 수 있는 최댓값 지정
- 기본 최댓값 100
step - 짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정할 수 있음.
- 기본 값 1, 생략 가능
value - 필드에 표시할 초기값

 

5) 라디오 버튼과 체크박스 타입의 속성

속성 설명
name - 서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름 지정
- 라디오 버튼은 여러 개 중 하나만 선택하므로 관련 있는 그룹끼리는 똑같은 속성 값을 가짐
value 서버로 알려 줄 때 넘길 값 지정
checked 기본으로 선택해 놓을 항목이 있을 때 사용

 

6) date, month, week 타입

유형 설명
date 날짜 선택
month 월과 연도 선택
week  주와 연도 선택

 

7) time, datetime, datetime-local 타입의 속성

속성 설명
min 날짜나 시간의 최솟값 지정
max 날짜나 시간의 최댓값 지정
step 스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지 지정
value 화면에 표시할 초기값 지정

 

3. 소스 코드 및 실행 화면

- id-pw.html

<!doctype html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title> 웹 폼</title>
	<style>
			label {
			font-size:14px; /* 글자 크기 */
			line-height:25px;  /* 줄 간격 */
			}
			label em{
			color:red;  /* 글자색 */
			font-weight:800; /* 글자 굵기 */ 
			}
		</style>
	</head>
	<body>
	<form>
	<fieldset>
		<label>아이디: <input type="text" id="user_id" size="10"></label>
		<label>비밀번호: <input type="password" id="user_pw" size="10"></label>
		<input type="submit" value="로그인">
	</fieldset>
	</form>
	</body>
</html>

id-pw.html

 

- url-email.html

<!doctype html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title> 웹 폼</title>
	<style>
			ul {
				list-style:none;
			}
			li {
				margin:10px;
			}
			li label {
				width:120px;
			float:left;
			text-align:right;
			padding-right:8px;
			}
			input[type="submit"] {
				text-align:center;
				width:100%;
				height:30px;
				margin-top:15px;
			}
		</style>
	</head>
	<body>
		<h1>회원 가입</h1>
		<form>
			<fieldset>
				<legend>로그인 정보</legend>
				<ul>
					<li>
					<label for="user-id">아이디 </label>
							<input type="text" id="user-id">
					</li>
					<li>
						<label for="pwd1">비밀번호 </label>
						<input type="password" id="pwd1">
					</li>
					<li>
						<label for="pwd2">비밀번호 확인 </label>
						<input type="password" id="pwd2">				
					</li>
				</ul>
			</fieldset>
			<fieldset>
				<legend>개인 정보</legend>
				<ul>
					<li>
						<label for="user-name">이름 </label>
						<input type="text" id="user-name">
					</li>
					<li>
						<label for="mail">메일 주소</label>
						<input type="email" id="mail">
					</li>
					<li>
						<label for="phone">연락처</label>
						<input type="tel" id="phone">
					</li>
					<li>
						<label for="homep">블로그/홈페이지</label>
						<input type="url" id="homep">
					</li>
				</ul>
			</fieldset>
			<input type="submit" value="가입하기">
		</form>
	</body>
</html>

url-email.html

 

- number-range.html

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title> 웹 폼</title>
		<style>
				body {
				background-color:#fff; 
				}
				form legend{
				font-size:15px;
				font-weight:600; 
				}
				form label.reg {
				font-size:14px;
				width:150px;
				float:left;
				}
				form ul li{
				list-style:none; 
				margin: 15px 0;		
				}
				#member, #stuffs {
				width:50px; 
				}
		</style>
	</head>
	<body>
		<form>
			<fieldset>
			<legend> 등록 정보</legend>
				<ul>
				<li>
						<label class="reg" for="member">참여인원<small>(최대10명)</small></label>
					<input type="number" id="member" value="1" min="0" max="10" step="1">
					</li>
					<li>
						<label class="reg" for="stuffs">지원물품<small>(1인당 5개)</small></label>
					<input type="number" id="stuffs" value="1" min="0" max="50" step="5">
					</li>
					<li>
						<label class="reg" for="satis">희망 단계<small>(하,중,상)</small></label>
					<input type="range" id="satis" value="1" min="1" max="3">
					</li>           
				</ul>
			</fieldset>
		</form>
	</body>
</html>

number-range.html

- radio-checkbox.html

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title> 웹 폼</title>
		<style>
			body {
			background-color:#fff; 
			}
			form fieldset{
			margin-bottom:25px; 
			}	 
			form legend{
			font-size:15px;
			font-weight:600; 
			}
			form label.reg {
			font-size:14px;
			color:#390;
			font-weight:bold;
			width:110px;
			float:left;
			text-align:right;
			margin-right:10px;
			}
			form ul li{
			list-style:none; 
			margin: 15px 0;	
			font-size:14px;	
			}


			#member, #stuffs {
			width:50px; 
			}
			
			#pre {
			margin-left:15px;
			}
		</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>신청 과목</legend>
				<p>이 달에 신청할 과목을 선택하세요 (1과목만 가능)</p>
				<label><input type="radio" name="subject" value="speaking">회화</label>
				<label><input type="radio" name="subject" value="grammar">문법</label>
				<label><input type="radio" name="subject" value="writing">작문</label>       
			</fieldset>
			<fieldset>
				<legend>메일링</legend>
				<p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 선택 가능)</p>
				<label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
				<label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
				<label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
			</fieldset>
		</form>
	</body>
</html>

radio-checkbox.html

- color.html

<!doctype html>
<html lang="ko">
  <head>
      <meta charset="utf-8">
      <title> 웹 폼</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>과 티셔츠 설문</legend>
        <p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해 주세요.</p>
        <label>선호색상  <input type="color" value="#00ff00"> </label>
      </fieldset>

    </form>
  </body>
</html>

color.html

- date.html

<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>date</title>
	</head>
	<body>
		<form>
			<h3>조회기간 선택</h3>
			<label><input type="date" id="start"></label>
			<label><input type="date" id="end"></label>
		</form>
	</body>
</html>

date.html

- time.html

<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>time 속성</title>
	</head>
	<body>
		<form>		
			<h3>대관시간을 선택하세요(오늘)</h3>
			<label>시작 시간<input type="time" value="09:00" id="start1"></label>,
			<label>종료 시간<input type="time" value="18:00" id="end1"></label>

			<h3>대관시간을 선택하세요(다른날짜)</h3>
			<label>시작 시간<input type="datetime-local" value="2016-03-02T09:00" id="start2"></label>,
			<label>종료 시간<input type="datetime-local" value="2016-03-02T18:00" id="end2"></label>
		</form>
	</body>
</html>

time.html

- submit-reset.html

<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>전송 - 리셋 </title>
		<style>
			body {
				padding:20px;
			}
		</style>
	</head>
	<body>
		<h3>메일링 리스트 등록</h3>
		<form action="register.php" method="post">
			<label> 메일 주소 <input type="text"></label>
			<input type="submit" value="제출">
			<input type="reset" value="다시입력">
		</form>
	</body>
</html>

submit-reset.html

- submit-image.html

<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>이미지 버튼 </title>
		<style>
			table {
				border:0;
			}
			td {
				padding:5px 10px;
				border:0;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<form>
			<table>
				<tr>
					<td><label>아이디 <input type="text" size="15"></label></td>
					<td><label>비밀번호 <input type="password" size="15"></label></td>
					<td><input type="image" id="butt" src="images/login.jpg"  alt="login"></td>
				</tr>
			</table>	
		</form>
	</body>
</html>

submit-image.html

- button.html

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>폼 버튼 </title>
	</head>
	<body>
		<form>		
			<input type="button" value="새 탭 열기" onclick="window.open()">
		</form>
	</body>
</html>

button.html

저작자표시 비영리 변경금지

'웹언어 공부 > HTML5' 카테고리의 다른 글

[HTML5] 여러 데이터 나열해 보여 주기  (0) 2021.08.26
[HTML5] <input> 태그의 다양한 속성  (0) 2021.08.26
[HTML5] 폼 만들기  (0) 2021.08.19
[HTML5] SVG 이미지  (0) 2021.08.16
[HTML5] 링크 만들기  (0) 2021.08.16
'웹언어 공부/HTML5' Related Articles more