HTML5 폼(Form)
폼 요소(Form Elements): <form>, <input>, <textarea>, <button>, <select>, <label>
HTML5에서 폼 요소는 사용자로부터 데이터를 입력받고 서버로 전송하기 위한 다양한 태그를 제공합니다.
예제: 기본 폼 구성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 폼 구성</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">이름(Name):</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">이메일(Email):</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">메시지(Message):</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="submit">제출(Submit)</button>
</form>
</body>
</html>
새로운 입력 타입(New Input Types): email, url, tel, number, range, date, color
HTML5는 다양한 새로운 입력 타입을 도입하여 폼을 더욱 유용하게 만들었습니다.
예제: 새로운 입력 타입 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>새로운 입력 타입</title>
</head>
<body>
<form action="/submit" method="post">
<label for="email">이메일(Email):</label>
<input type="email" id="email" name="email"><br><br>
<label for="url">웹사이트(URL):</label>
<input type="url" id="url" name="url"><br><br>
<label for="tel">전화번호(Tel):</label>
<input type="tel" id="tel" name="tel"><br><br>
<label for="age">나이(Age):</label>
<input type="number" id="age" name="age" min="0" max="100"><br><br>
<label for="rating">평점(Rating):</label>
<input type="range" id="rating" name="rating" min="0" max="10"><br><br>
<label for="birthday">생일(Birthday):</label>
<input type="date" id="birthday" name="birthday"><br><br>
<label for="color">좋아하는 색상(Favorite Color):</label>
<input type="color" id="color" name="color"><br><br>
<button type="submit">제출(Submit)</button>
</form>
</body>
</html>
폼 검증(Validation) 속성: required, pattern, min, max, maxlength
HTML5는 폼 검증을 위한 다양한 속성을 제공합니다. 이를 통해 사용자 입력 데이터를 서버로 전송하기 전에 클라이언트 측에서 검증할 수 있습니다.
예제: 폼 검증 속성 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폼 검증 속성</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">사용자 이름(Username):</label>
<input type="text" id="username" name="username" required maxlength="15"><br><br>
<label for="password">비밀번호(Password):</label>
<input type="password" id="password" name="password" required pattern=".{6,}"><br><br>
<label for="age">나이(Age):</label>
<input type="number" id="age" name="age" min="0" max="120"><br><br>
<button type="submit">제출(Submit)</button>
</form>
</body>
</html>
폼의 접근성 향상(Enhancing Form Accessibility): placeholder, datalist, output
접근성 향상 속성은 사용자 경험을 개선하고, 폼 사용을 더 쉽고 직관적으로 만듭니다.
예제: 접근성 향상 속성 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폼의 접근성 향상</title>
</head>
<body>
<form action="/submit" method="post">
<label for="search">검색(Search):</label>
<input type="text" id="search" name="search" placeholder="검색어를 입력하세요 (Enter search term)"><br><br>
<label for="browsers">브라우저 선택(Browser):</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist><br><br>
<label for="volume">볼륨(Volume):</label>
<input type="range" id="volume" name="volume" min="0" max="100" oninput="outputVolume.value = volume.value">
<output name="outputVolume" for="volume">50</output><br><br>
<button type="submit">제출(Submit)</button>
</form>
</body>
</html>
HTML5 폼 요소와 속성들은 사용자의 입력을 효과적으로 수집하고 검증하는 데 매우 유용합니다. 새로운 입력 타입과 검증 속성, 그리고 접근성을 향상시키는 속성들을 통해 사용자 경험을 크게 개선할 수 있습니다.