반응형
1. autofocus 속성 – 입력 커서 표시하기
① 페이지 로딩 후 바로 폼 요소 중 원하는 요소에 마우스 커서 표시
② HTML5 이전에는 javascript 문법으로 처리했지만 HTML5에서 autofocus라는 속성으로 간단하게 구현
2. placeholder 속성 – 힌트 표시하기
① 사용자가 텍스트를 입력할 때 도움이 되도록 적당한 힌트 내용 표시
3. readonly 속성 – 읽기 전용 필드 만들기
① 입력란에 텍스트를 표시하고 사용자가 입력 불가능하도록 만듬
② 읽기 전용으로 만들 때 readonly=“true“, readonly=“readonly“, readonly 로 설정. 기본 값은 false
③ 읽기 전용 해제 시에는 readonly 속성을 삭제하거나 readonly=“false”로 지정
4. required 속성 – 필수 필드 지정하기
① 필수적으로 입력해야 되는 폼 요소에 required 속성을 지정해 필수 필드로 만듬
② 필수 필드로 지정할 때는 required=“required”, required로 설정.
③ 필수 필드 해제 시에는 required 속성 삭제
5. min, max, step 속성
① min : 필드의 최소 값 지정
② max : 필드의 최대 값 지정
③ step : 증가, 감소할 값의 범위 지정
④ <input> 태그의 type이 date, datetime, datetime-local, month, week, time, number, range일 경우만 사용 가능
<예제 – attribute-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
width: 110px;
color: #390;
text-align: right;
margin-right: 10px;
}
form ul li {
list-style: none;
margin: 15px 0;
font-size: 14px;
}
</style>
</head>
<body>
<!--h1+form>(fieldset>(legend+(ul>li>(label+input)))+(fieldset>legend+(ul>(li>(label+input))*2+(li>(label+(select>option*6)))))+(fieldset>(legend+(ul>(li>(label+input))*3)))+(fieldset>button*2))-->
<h1>여름방학 특강 신청</h1>
<form>
<fieldset id="subject">
<legend>수강과목</legend>
<ul>
<li>
<label class="reg" for="subj">영어회화(초급)</label>
<!--readonly속성 : 읽기전용필드 설정-->
<input type="text" id="subj" value="오전 9:00~11:00" readonly>
</li>
</ul>
</fieldset>
<fieldset id="register">
<legend>신청자</legend>
<ul>
<li>
<label class="reg" for="uname">이름</label>
<!--autofocus속성 : 화면 표출될 때 자동으로 마우스 커서 표시-->
<!--required속성 : 필수입력필드 설정-->
<input type="text" id="uname" autofocus required>
</li>
<li>
<label class="reg" for="uid">학번</label>
<!--placeholder속성 : 입력하는 내용의 힌트 표시-->
<!--maxlength속성 : 입력할 수 있는 최대 문자 길이-->
<input type="text" id="uid" placeholder="하이픈없이 입력" maxlength="8" required>
</li>
<li>
<label class="reg" for="uclass">학과</label>
<select id="uclass">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
<fieldset>
<legend>교재주문</legend>
<ul>
<li>
<label class="reg" for="book">교재</label>
<input type="number" id="book" value="1" min="1" max="3">
</li>
<li>
<label class="reg" for="wsheet">워크시트</label>
<input type="number" id="wsheet" value="1" min="1" max="3">
</li>
<li>
<label class="reg" for="group">단체주문</label>
<input type="number" id="group" value="10" min="10" max="100" step="10">
</li>
</ul>
</fieldset>
<fieldset>
<button type="submit" value="submit">신청하기</button>
<button type="reset" value="reset">다시쓰기</button>
</fieldset>
</form>
</body>
</html>
6. size, minlength, maxlength 속성 – 텍스트 길이, 최소 길이, 최대 길이 지정
① size : 텍스트 필드와 비밀번호 필드, 검색 필드 등 한 줄짜리 텍스트 필드에서 화면에 몇 글자까지 표출할지 지정
② minlength : 최소 글자 수 지정
③ maxlength : 최대 글자 수 지정
<예제 – join-001.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 폼</title>
<style>
ul {
list-style: none;
}
li {
margin: 10px;
}
</style>
</head>
<body>
<!--h1+form>ul>(li>label>input)*5-->
<h1>회원 가입을 환영합니다.</h1>
<form action="">
<ul>
<li>
<label>
<!--size속성 : 화면에 표출할 문자의 길이 지정(input박스의 사이즈)-->
<!--minlength속성 : 입력할 수 있는 문자의 최소 길이 지정-->
<!--maxlength속성 : 입력할 수 있는 문자의 최대 길이 지정-->
아이디 : <input type="text" id="user_id" size="15" minlength="4" maxlength="15">
</label>
<small style="color: red;">4~15자리 이내의 영문과 숫자</small>
</li>
<li>
<label>
이메일 : <input type="email" id="user_email">
</label>
</li>
<li>
<label>
비밀번호 : <input type="password" id="user_pwd">
</label>
</li>
<li>
<label>
비밀번호 확인 : <input type="password" id="check_pwd">
</label>
</li>
<li>
<input type="submit" value="회원가입">
</li>
</ul>
</form>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 04-5 기타 다양한 폼 요소들 (0) | 2021.09.05 |
|---|---|
| [HTML] 04-4 여러 데이터 나열해 보여 주기 (0) | 2021.09.05 |
| [HTML] 04-2 사용자 입력을 위한 <input> 태그 (0) | 2021.09.05 |
| [HTML] 04-1 폼 만들기 (0) | 2021.09.05 |
| [HTML] 03-3 SVG 이미지와 Modernizr (0) | 2021.09.05 |
댓글