사용자 입력을 위한 input 태그 (1)

input 태그는 사용자가 입력한 정보를 받을 때 사용한다.

 

1. 텍스트와 비밀번호를 나타내는 text, password 

input 태그의 type 속성 중 

text는 한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스

password는 비밀번호를 입력할 수 있는 필드를 넣는다.

<form>
        <fieldset>
            <label>아이디 : <input type="text" id="user_id" size="10"></label>
            <label>비밀번호 : <input type="password" id="user_pw" size="10"></label>
        </fieldset>
    </form>

type 속성의 text, password

2. 용도에 맞게 입력하는 search, url, email

input 태그의 type 속성 중 

search는 검색할 때 입력하는 필드

url은 URL 주소를 입력하는 필드

email은 이메일 주소를 입력하는 필드를 넣어준다.

<fieldset>
        <legend>배송 정보</legend>
        <ul>
            <li>
                <label for="user-name">이름</label>
                <input type="text" id="user-name">
            </li>
            <li>
                <label for="addr">배송 주소</label>
                <input type="text" id="addr">
            </li>
            <li>
                <label for="mail">이메일 주소</label>
                <input type="email" id="mail">
            </li>
            <li>
                <label for="phone">연락처</label>
                <input type="tel" id="phone">
            </li>
        </ul>
    </fieldset>

type 속성의 search, url, email

3. 체크박스와 라디오버튼을 나타내는 checkbox, radio

input 태그의 type 속성 중 

checkbox는 여러 항목 중 여러 개 선택

radio는 1개만 선택할 수 있다.

(체크박스, 라디오버튼의 속성 value는 서버에게 알려줄 때 넘겨줄 값을 지정)

<h1>레드향 주문하기</h1>
    <form>
        <fieldset>
            <legend>상품 선택</legend>
            <p><b>주문할 상품을 선택해주세요</b></p>
            <label><input type="checkbox" value="s_3">선물용 3kg</label>
            <label><input type="checkbox" value="s_5">선물용 5kg</label>
            <label><input type="checkbox" value="f_3">가정용 3kg</label>
            <label><input type="checkbox" value="f_5">가정용 5kg</label>
            <p><b>포장 선택</b></p>
            <label><input type="radio" name="gift" value="yes" checked>선물 포장</label>	<!--checked는 기본으로 선택할 항목-->
            <label><input type="radio" name="gift" value="no">선물 포장 안함</label>
        </fieldset>
    </form>

type 속성의 checkbox, radio

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.