HTML5 폼 속성
HTML5에 새로 추가된 input 요소의 속성
| 속성 | 설명 |
| placeholder | 기본 텍스트 지정 |
| autofocus | 자동 포커싱 지정 |
| autocomplete | 자동 완성 지정 |
| required | 필수 입력 지정함 |
| pattern | 지정한 정규 표현식에 대한 유효성을 검사함 |
placeholder 속성
placeholder 속성은 입력 타입에 기본 텍스트를 힌트로 지정하는 역할을 수행합니다.
내용을 입력하면 힌트 표시는 사라집니다.
| 예제 |
| <body> <input type="text" name="name" placeholder ="이름을 입력하세요." > <input type="email" name="email" placeholder ="이메일을 입력하세요."> <input type="text" name="job" placeholder ="직업을 입력하세요."> </body> |
autofocus 속성
autofocus 속성은 웹 페이지의 로딩이 끝남과 동시에 지정한 입력 타입에 자동으로 포커스가 위치하게 하는 역할을 수행합니다.
| 예제 |
| autofocus : <input type = "text" name="name" autofocus > |
autocomplete 속성
autocomplete 속성은 지정한 입력 항목의 값을 자동 완성하는 역할을 수행합니다.
| 예제 |
| autocomplete : <input type="text" autocomplete =" on " > |
required 속성
required 속성은 필수 입력 항목을 지정하는 역할을 수행합니다.
| 예제 |
| required : <input type = "text" name = "name" required > <input type = "submit"> |
pattern 속성
pattern 속성은 정규 표현식을 지정하기만 하면 사용자가 입력한 값에 대한 유효성 검사가 자동으로 되고, 정규 표현식에 어긋난 값이 입력되면 오류 메시지가 출력됩니다.
| 예제 |
| pattern : <input type="text" name = "tel" pattern = "0\d{2,3}\-\d{2,4}-\d{3,4}" title = "올바른 형식이 아닙니다." > <input type = "submit"> |
HTML5 폼 속성 실습 프로그램
'HTML5_CSS_JAVASCRIPT' 카테고리의 다른 글
| HTML5 선 그리기와 다각형 그리기 (0) | 2022.05.24 |
|---|---|
| HTML5 canvas 요소와 사각형 그리기 (0) | 2022.05.23 |
| HTML5 폼 요소 (0) | 2022.05.21 |
| HTML5 입력 타입 (0) | 2022.05.20 |
| CSS3 미디어 쿼리 (0) | 2022.05.19 |
댓글