728x90
readonly : 수정할 수 없게 설정가능
코드작성법
<div>
<input type="text" name="" id="" value="ABC" readonly />
</div>
disabled : readonly와 동일하게 수정할 수 없게 가능 readonly와 차이점은form태그로 묶었을 때 submit 하는 경우에 지정된 주소로 전송되지 않는다.
코드작성법
<div>
<input type="text" name="" id="" value="ABC" disabled />
</div>
maxlength : 최대글자 수
코드작성법
<div>
<input type="text" name="" id="" maxlength="4" />
</div>
placeholder : 사용자에게 가이드를 주는 역할
코드작성법
<div>
<input
type="tel"
name=""
id=""
placeholder="하이픈 없이 숫자만 입력하세요. 예)010-0000-1111"
style="width: 100%"
/>
</div>
required : 필수로 입력받아야 하는 것을 받을때 (form태그 안에서만 작동)
코드작성법
<form action="">
<label for="userId">아이디</label>
<input type="text" name="" id="userId" required />
<div>
<button type="submit">저장</button>
</div>
</form>
autocomplete : 사용자가 브라우저에서 지금까지 입력했던 값을 띄워주는 역할(autocomplete의 경우 name값이 같아야만 자동완성 기능 구현) 표준값이 존재한다
2023.09.25 - [HTML, CSS] - HTML - autocomplete 표준값
HTML - autocomplete 표준값
leo104.tistory.com
코드작성법
<div>
<input type="text" name="email" id="" autocomplete="on" />
</div>
전체 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<div>
<input type="text" name="" id="" value="ABCD" />
</div>
<div>
<input type="text" name="" id="" value="ABC" readonly />
</div>
<div>
<input type="text" name="" id="" value="ABC" disabled />
</div>
<button type="submit">저장</button>
</form>
<div>
<input type="text" name="" id="" maxlength="4" />
</div>
<div>
<input
type="tel"
name=""
id=""
placeholder="하이픈 없이 숫자만 입력하세요. 예)010-0000-1111"
style="width: 100%"
/>
</div>
<div>
<form action="">
<label for="userId">아이디</label>
<input
type="text"
name=""
id="userId"
required
autofocus="on"
autocomplete="on"
/>
<label for="password">비밀번호</label>
<input
type="password"
name=""
id="password"
required
autocomplete="on"
/>
<button type="submit">저장</button>
</form>
</div>
<div>
<input type="text" name="email" id="" autocomplete="on" />
</div>
<div>
<input type="text" name="phone" id="" autocomplete="on" />
</div>
<div>
<input type="text" name="username" id="" autocomplete="on" />
</div>
</body>
</html>
구현 모습
728x90
'HTML, CSS' 카테고리의 다른 글
| HTML - form태그의 method, target (0) | 2023.09.25 |
|---|---|
| HTML - select, textarea, fieldset, legend, datalist, option 태그 (0) | 2023.09.25 |
| HTML - autocomplete 표준값 (0) | 2023.09.25 |
| HTML - table 태그( table, tr,td , thead,tbody, rowspan,colspan,tfoot ) (0) | 2023.09.24 |
| HTML - 목록 태그(ul, li, ol, dl, dt, dd) (0) | 2023.09.24 |
