input 태그-6 (주요 속성들)

Hush 2022. 5. 30. 17:49

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>

저작자표시 (새창열림)