Chap 05-1. 입력 양식 작성하기
입력 양식 작성하기
3. <input> 태그의 다양한 속성
autofocus
페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
placeholder
- 입력란에 표시하는 힌트로,
필드를 클릭하면 사라짐
코드 예시 ) - autofocus와 placeholder 속성 사용하기
...
<!-- css 파일 사용 -->
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<div id="container">
<form>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name" autofocus>
</li>
<li>
<label for="addr">배송 주소 </label>
<input type="text" id="addr">
</li>
<li>
<label for="telephone">연락처 </label>
<input type="tel" id="telephone" maxlength="11" placeholder="하이픈 빼고 입력해 주세요.">
</li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>✔ 결과
readonly
내용을 보기만 하고 입력하지 못하게 함.(수정 불가함!)
required
필수 필드 체크- 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타남
코드 예시 ) - readonly와 required 속성 사용하기
...
<!-- css 파일 사용 -->
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<div id="container">
<form>
<h1>상품 주문 페이지</h1>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="prod">주문 상품</label>
<input type="text" id="prod" readonly value="상품용 3kg">
</li>
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name" autofocus required>
</li>
<li>
<label for="addr">배송 주소 </label>
<input type="text" id="addr" required>
</li>
<li>
<label for="telephone">연락처 </label>
<input type="tel" id="telephone" maxlength="11" placeholder="하이픈 빼고 입력해 주세요.">
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="취소하기">
</div>
</form>
</div>
</body>
</html>✔ 결과
textarea (텍스트 영역)
여러 줄의 텍스트 입력- 게시판 글 입력 양식, 사용자 약관 등
코드 예시 ) - textarea 태그 사용해보기
...
<!-- css 파일 사용 -->
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<div id="container">
<form>
<fieldset>
<legend>배송 정보</legend>
<ul id="shipping">
<li>
<label for="prod">주문 상품</label>
<input type="text" id="prod" readonly value="상품용 3kg">
</li>
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name" autofocus required>
</li>
<li>
<label for="addr">배송 주소 </label>
<input type="text" id="addr" required>
</li>
<li>
<label for="telephone">연락처 </label>
<input type="tel" id="telephone" maxlength="11" placeholder="하이픈 빼고 입력해 주세요.">
</li>
<li>
<label for="memo">메모 </label>
<textarea id="memo" cols="40" rows="8"></textarea>
</li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>✔ 결과
select, option
- 여러 옵션 중에서 선택 - 드롭다운 목록
- 공간을 최소한으로 사용하면서 여러 옵션 표시 가능
코드 예시 ) - select 태그 사용해보기
...
</head>
<style>
fieldset {
margin: 10px;
}
</style>
<body>
<form>
<fieldset>
<h1>주문하기</h1>
<label for="prod">상품 선택</label>
<select id="prod">
<option value="s_3">선물용 3kg</option>
<!-- selected는 기본적으로 선택해서 보여 줄 항목을 지정 -->
<option value="s_5" selected>선물용 5kg</option>
<option value="h_3">가정용 3kg</option>
<option value="h_5">가정용 5kg</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>✔ 결과
4. 간단한 회원가입 페이지 만들어보기!
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>주문</title>
</head>
<style>
#container{
width: 500px;
vertical-align: middle;
margin: 30px auto;
}
label {
font-weight: bold;
}
li {
margin-bottom: 10px;
}
.memo-div .memo {
vertical-align: middle;
}
fieldset {
margin-bottom: 10px;
}
ul li {
list-style: none;
}
.enter,
.cancel {
border-radius: 6px;
border-style: solid;
border: none;
background-color: rgb(123, 123, 219);
color: white;
padding: 5px 10px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
<body>
<div id="container">
<h1>회원 가입을 환영합니다</h1>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="user-id">아이디 <input type="text" class="user-id" placeholder="4자~10자 사이, 공백없이" autofocus required></label>
</li>
<li>
<label for="user-email">이메일 <input type="email" class="user-email"></label>
</li>
<li>
<label for="user-password">비밀번호 <input type="password" class="user-password" placeholder="문자와 숫자, 특수기호 포함" required></label>
</li>
<li>
<label>가입경로
<select>
<option value="blog" selected>블로그</option>
<option value="search">검색</option>
<option value="sns">SNS</option>
<option value="another">기타</option>
</select>
</label>
</li>
<li>
<div class="memo-div">
<label for="memo">메모 </label>
<textarea class="memo" cols="28" rows="8"></textarea>
</div>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mail" value="yes"> 메일 수신
<input type="radio" name="mail" value="no" checked> 메일 수신 안함
</fieldset>
<div class="buttons">
<input type="submit" value="가입하기" class="enter">
<input type="reset" value="취소하기" class="cancel">
</div>
</form>
</div>
</body>
</html>✔ 결과
Hi