고정 헤더 영역
상세 컨텐츠
본문
반응형
autofocus 속성 - 입력 커서 표시하기
- autofocus 속성을 사용하면 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다. 이 기능은 HTML5에서 추가된 기능이다.
<form>
<label class="reg" for="uname">이름</label>
<input type="text" id="uname" autofocus required>
</form>
placeholder 속성 - 힌트 표시하기
- 포털 사이트의 로그인 창에서도 따로 '아이디'나 '비밀번호' 같은 제목에 붙이지 않고 입력 박스 안에 '아이디'나 '비밀번호'라고 표시해 놓아 사용자가 알아볼 수 있다.
- <input> 태그의 placeholder 속성으로 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input 태그 속성</title>
</head>
<body>
<form>
<label for="uid">학번</label>
<input type="text" id="uid" placeholder="하이픈없이 입력" />
</form>
</body>
</html>실행 화면
readonly 속성 - 읽기 전용 필드 만들기
- 입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만들 수 도 있다. readonly 속성은 필드 안에 내용이 있지만 내용을 보여주기만 하고, 입력은 할 수 없게 한다.
- readonly 속성은 true나 false 값 중 하나만 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input 태그 속성</title>
</head>
<body>
<form>
<label for="sub">제목</label>
<input type="sub" value="여름은 지나갔다." readonly />
</form>
</body>
</html>
실행 화면
required 속성 - 필수 필드 지정하기
- 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 한다. 필수적으로 입력해야 하는 내용에는 required 속성을 지정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input 태그 속성</title>
</head>
<body>
<form>
<label for="sub">제목</label>
<input type="sub" value="여름은 지나갔다." readonly />
</form>
</body>
</html>
실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [HTML 기초] 기타 다양한 폼 요소들 (0) | 2021.04.08 |
|---|---|
| [HTML 기초] 여러 데이터 나열을 보여 주기 (0) | 2021.04.07 |
| [HTML 기초] 사용자 입력을 위한 <input> 태그 (2) (0) | 2021.04.05 |
| [HTML 기초] 사용자 입력을 위한 <input> 태그 - 1 (0) | 2021.04.02 |
| [HTML 기초] 폼 만들기 (0) | 2021.03.31 |
댓글 영역