WEB-HTML-입력 input 태그의 주요 속성
input 태그의 주요 속성
입력하는 input 태그의 주요 속성
자동 입력 커서 속성 autofocus
- 기본형
<body>
<form>
<label for="username">이름</label>
<input type="text" id = "username" autofocus>
</form>
</body>
- 출력 화면
힌트 표시하는 placeholder 속성
- 기본형
<div>
<label for="username">이름</label>
<input type="text" id = "username" autofocus>
</div>
<div>
<label for="id">아이디</label>
<input type="text" id = "id" placeholder="아이디를 입력해주세요.">
</div>
- 출력 화면
읽기만 가능한 readonly 속성
readonly 라고 쓰던지 readonly = “readonly” 혹은 readonly = “true”로 사용한다.
- 기본형
<div>
<label for="tel">전화번호</label>
<input type="tel" id="tel" value="010-1234-1234" readonly>
</div>
- 출력 화면
필수 입력 필드 required 속성
submit 버튼을 통한 내용 전송을 위해 반드시 입력이 되었는지를 확인하기 위한 required 속성
- 기본형
<body>
<form>
<fieldset>
<legend>배송정보</legend>
<label for="name">이름</label>
<input type="text" id="name" required> // required 사용
</fieldset>
<div>
<input type="submit" value="제출하기">
</div>
</form>
</body>
- 출력 화면
출처
- (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.
