input 태그에 여러 자잘한 기능들을 추가할 수 있는 속성들을 알아보자
autofocus : 자동으로 커서 가져다놓기
이 속성을 사용하면 페이지를 불러오자마자 원하는 요소에 마우스 포인터를 사용할 수 있다.
<input type=텍스트입력필드 autofocus>
placeholder : 힌트 표시
텍스트박스에 적당한 힌트 내용을 표시하고, 힐드를 클릭하면 힌트가 사라지도록 할 수 있다.
'아이디를 입력하세요' 등의 힌트를 로그인 텍스트박스에 표시하는 것이 그 예시이다.
<input type=텍스트입력필드 placeholder="힌트내용">
autofocus와 placeholder를 사용하는 예제이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<form action="">
<fieldset>
<legend>배송 정보</legend>
<label for="">이름<input type="text" autofocus></label><br>
<label for="">배송 주소<input type="text"></label><br>
<label for="">이메일<input type="email" name="" id=""></label><br>
<label for="">연락처<input type="tel" name="" id="" placeholder="하이픈 뺴고 입력해 주세요"></label><br>
<label for="">배송 지정<input type="date" name="" id="">(주문일로부터 최소 3일 이후)</label>
</fieldset>
</form>
</body>
</html>

readonly : 읽기 전용 필드
입력은 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있다.
<input type=텍스트입력필드 readonly>
required : 필수 입력 필드
submit 버튼이 클릭되었을 때 required속성이 있는 필드는 내용이 채워져있는지 검사됩니다.
만약 필수 필드를 체우지 않고 submit 버튼을 누를 경우, 제출이 되지 않고 경고메세지가 나옵니다.
<input type=텍스트입력필드 required>
readonly와 required 속성을 사용하는 예제이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<form action="">
<fieldset>
<legend>배송 정보</legend>
<label for="">이름<input type="text" value="HUSH" readonly></label><br>
<label for="">배송 주소<input type="text" required></label><br>
<label for="">이메일<input type="email" name="" id=""></label><br>
<label for="">연락처<input type="tel" name="" id="" placeholder="하이픈 뺴고 입력해 주세요"></label><br>
<label for="">배송 지정<input type="date" name="" id="">(주문일로부터 최소 3일 이후)</label>
<input type="submit" value="제출하기">
</fieldset>
</form>
</body>
</html>

'📁Web Developing > HTML 기초' 카테고리의 다른 글
폼에서 사용하는 여러 가지 태그 (0) | 2022.05.30 |
---|---|
input 태그-5 (버튼, 히든필드) (0) | 2022.05.30 |
input 태그-4 (날짜와 시간 입력) (0) | 2022.05.30 |
input 태그-3 (number, range) (0) | 2022.05.30 |
input 태그-2 (버튼) (0) | 2022.05.30 |
댓글