반응형
autofocus
문서가 로드되면 autofocus 속성이 들어간 input 태그에 자동으로 focus가 이뤄집니다.
<form action="" method="">
<input type="text" autofocus>
<input type="text">
<input type="text">
</form>
required
회원가입을 할 때 필수항목을 입력하지 않으면 경고 문구가 뜨고 넘어가지 않죠? 원래는 스크립트로 구현해야 하는데 HTML로 쉽게 할 수 있는 방법이 바로 required 속성입니다.
input태그 모두 required속성을 주겠습니다.
그리고 한 칸을 비운채로 submit버튼을 누르면 어떻게 될까요?
<form action="" method="">
<input type="text" required>
<input type="text" required>
<input type="text" required>
<button type="submit">다음</button>
</form>placeholder
고객이 회원가입을 할 때 해당 입력창에 뭘 입력해야 하는지 힌트를 주는 속성이 바로 placeholder입니다.
물론 응용해서 회원가입 뿐만 아니라 다양한 용도로 사용할 수도 있겠죠?
<form action="" method="">
<input type="text" placeholder="아이디">
<input type="password" placeholder="비밀번호">
</form>readonly
입력은 받지 않고 읽기와 복사만 가능한 속성입니다.
어디에 사용하는지가 제일 중요하죠?
스크립트를 이용해서 특정 조건을 만족하면 활성화가 되게끔 합니다. 예를 들면 은행 대출을 받을 때 사전 설문조사로 특정 조건을 만족한 고객만 해당 입력창에 입력이 가능하도록 하는 것이죠.
<form action="" method="">
<input type="text" readonly value="조건 만족 전 입력 불가">
</form>반응형
'프로그래밍 > Style & Design' 카테고리의 다른 글
| Best 15 CSS Trends To Watch For 2023 (0) | 2023.07.04 |
|---|---|
| [HTML] 24 Powerful HTML Attributes Every Senior Web Engineer Should Master! (0) | 2023.06.08 |
| 웹폰트 사용하기,구글폰트/웹폰트 연결하기, 직접 폰트 변환하여 적용하기 (0) | 2022.10.31 |
| Pixabay 이미지 (0) | 2022.10.13 |
| 브라우저 화면 드레그 안되게 css (0) | 2022.10.04 |
