[HTML5] 8.폼요소(2)

추가된 폼 속성

드디어 HTML5 마지막 장입니다~!

이번 장에서는 추가된 폼속성에 대해 알아보겠습니다.

required 속성

required 속성은 입력 필드에 값이 채워졌는지에 대한 부분과 유효성을 판단해주는 속성입니다.

required 속성을 적용한 input 요소에 값을 입력하지 않거나 유효하지 않은 상태로

전송을 누르면 오류메시지가 나타납니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>required 속성</title>
</head>
<body>
	<p><strong>*</strong>표시는 필수입력 항목입니다.</p>
	<form action="">
	<fieldset>
		<legend>필드 유효성 검사</legend>
		<ul>
			<li><label for="name"><strong>*</strong>이름 </label><input type="text" id="name" required="required"></li>
			<li><label for="address">주소 </label><input type="text" id="address" ></li>
			<li><label for="phone"><strong>*</strong>전화번호 </label><input type="text" id="phone" required="required"></li>
		</ul>
		<p><input type="submit" value="전송"/></p>
	</fieldset>
	</form>
</body>
</html>

placeholder 속성

placeholder 속성은 각 필드에 대한 입력형식 힌트를 제공합니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>placeholder 속성</title>
</head>
<body>
	<form action="">
	<fieldset>
		<legend>필드에 입력형식 힌트주기</legend>
		<ul>
			<li><label for="name">이름 </label><input type="text" id="name" placeholder="구경민"></li>
			<li><label for="address">주소 </label><input type="text" id="address" placeholder="서울시 서대문구"></li>
			<li><label for="phone">전화번호 </label><input type="text" id="phone" placeholder="0101234"></li>
		</ul>
		<p><input type="submit" value="전송"/></p>
	</fieldset>
	</form>
</body>
</html>

autocomplete 속성

autocomplete 속성은 자동완성 기능에 대한 사용 여부를 판단해줍니다.

자동완성 기능을 사용하고 싶으면 속성값을 ‘on’으로,

아니면 ‘off’를 주면 됩니다.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>autocomplete 속성</title>
</head>
<body>
	<form action="">
	<fieldset>
		<legend>자동완성 기능</legend>
		<ul>
			<li><label for="phone">전화번호 </label><input type="tel" id="phone" autocomplete="off"></li>
			<li><label for="email">이메일 </label><input type="email" id="email" autocomplete="on"></li>
		</ul>
	</fieldset>
	</form>
</body>
</html>

list 속성

list 속성은 텍스트 필드에 내용 입력 시 미리 만들어 놓은 리스트 항목이

마치 자동완성 기능처럼 나타나도록 하는 속성입니다.

리스트 항목들은 datalist 요소로 만들어줍니다.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>list 속성</title>
</head>
<body>
	<form action="">
	<fieldset>
		<legend>datalist</legend>
		<p>
			<label for="course">수강과목: </label><input type="text" id="course" list="subjects"/>
			<datalist id="subjects">
				<option value="java">
				<option value="javascript">
				<option value="j-query">
			</datalist>
		</p>
	</fieldset>
	</form>
</body>
</html>

autofocus 속성

autofocus는 페이지가 로드되었을 때 입력 필드에 포커스(커서)가 자동으로 이동해주는 속성입니다.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>autofocus 속성</title>
</head>
<body>
	<form action="">
	<fieldset>
		<legend>autofocus</legend>
		<ul>
			<li>이름 <input type="text" autofocus="autofocus"/></li>
			<li>아이디 <input type="text" autofocus="autofocus"/></li>
			<li>비밀번호 <input type="password" autofocus="autofocus"/></li>
		</ul>
	</fieldset>
	</form>
</body>
</html>

autofocus 요소는 하나의 input 요소에만 적용할 수 있습니다.

disabled 속성과 readonly 속성

disable 속성과 readonly 속성은 적용된 input 요소의 내용을

수정하거나 선택할 수 없도록 비활성화 상태로 만듭니다.

예를 들어 프로그램을 설치 시 시리얼 번호를 입력하지 않으면

‘다음’으로 넘어가는 버튼이 비활성화되어 있는 것을 볼 수 있습니다.

이렇게 disable 속성은 어떤 조건에 만족하지 않았을 때 input 요소를 비활성화시키는데 사용되며,

readonly 속성은 input 요소의 값이 변경되지 않은 채 폼 전송이 되어야 하는 곳에 사용됩니다.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>disabled 속성과 readonly 속성</title>
</head>
<body>
	<form action="">
	<fieldset>
		<legend>disable 속성과 readonly 속성</legend>
		<ul>
			<!--disabled 속성-->
			<li>시리얼 번호 입력: <input type="text"/><input type="button" value="이전" /><input type="button" value="다음" disabled="disabled"></li>
            <!--readonly 속성-->
			<li>선택한 책: <input type="text" value="HTML5" readonly="readonly"/><input type="number" value="1"/></li>
		</ul>
	</fieldset>
	</form>
</body>
</html>

pattern 속성

pattern 속성은 required 속성처럼 필드의 값을 체크해주는 폼 유효성 검사 속성입니다.

하지만 required 속성은 일반적인 input type 형식에 대한 유효성을 체크하지만,

pattern 속성은 ‘정규 표현식 ‘ 방법으로 입력값과 정규식이 일치해야만 유효성에 통과할 수 있습니다.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>pattern 속성</title>
</head>
<body>
	<form action="">
	<fieldset>
		<legend>pattern 속성</legend>
			<p>전화번호 입력: <input type="tel" pattern="\d{3}-\d{3,4}-\d{4}" title="휴대폰 번호는 3자리-3~4자리-4자리로 입력"/></p>
			<p><input type="submit" value="전송"/>
			
	</fieldset>
	</form>
</body>
</html>

pattern 속성을 사용할 때는 해당 input 요소에 정해놓은 정규 표현식과

일치하게 입력할 수 있도록 title속성을 이용하여 입력 형식에 대한 툴팁을 제공해 주어야 합니다.

multiple 속성

multiple 속성은 여러 개의 이메일을 ‘,’로 입력하거나

다중의 파일을 선택할 수 있도록 해주는 속성입니다.

<lable for="email">이메일:</lable><input type="email" id="email" multiple="multiple"/>

<lable for="file">이메일:</lable><input type="filre" id="file" multiple="multiple"/>