폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 2

폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 2

1. type="hidden" - 히든 필드 만들기

• 히든(hidden) 필드는 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소입니다.
• 사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 보통 입력합니다.
• 히든 필드를 삽입할 때는 name 속성을 이용해 히든 필드의 이름을 지정하고 그에 대한 값은 value 속성을 이용해 서버로 넘겨줍니다.
• 예를 들어 아이디 중복 체크하는 것으로 사용자가 회원 가입 양식을 작성하고 서버로 전송할 때 hidden 필드의 값도 함께 서버로 전송됩니다.

기본형 : <input type="hidden" name="이름" value="서버로 넘길 값">

2. type="text" - 텍스트 필드 만들기

• 텍스트 필드는 한 줄짜리 일반 텍스트를 입력하는 필드입니다.
• 폼에서 가장 많이 사용하는 요소로 주로 아이디나 이름, 주소 등 텍스트를 입력할 때 사용합니다.
• 이 기능은 브라우저와 상관없이 사용 가능합니다.

 

기본형 : <input type="text" [속성="속성 값"]>

텍스트 필드에서 사용할 수 있는 속성

속 성	설 명
name	텍스트 필드를 구별할 수 있도록 이름을 붙입니다.
size	텍스트 필드의 길이를 지정합니다. 즉 화면에 몇 글자가 보이도록 할 것인지를 지정합니다. 예를 들어 최대 입력 가능한 글자 수가 10개 인데 size를 5로 지정하면 텍스트 필드 크기가 5개 글자 크기에 맞추어져 나머지 5개 글자는 화면에 보이지 않습니다.
value	텍스트 필드 요소가 화면에 표시될 대 텍스트 필드 부분에 표시될 내용입니다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됩니다.
maxlength	텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정합니다.

3. type="password" - 비밀번호 입력란 만들기

• "text" 타입이 아이디 입력란을 만들었다면 "password"는 말 그대로 비밀번호 입력란을 만듭니다.
• 패스워드 필드는 텍스트 필드와 거의 같지만 사용자가 입력하는 내용이 화면에 그대로 표시되지 않고 '*'나 '●'로 표시됩니다. 속성도 value 속성이 없다는 점만 제외하면 텍스트 필드와 같습니다.

 

기본형 : <input type="password" [속성="속성 값"]>

 

가장 기본적인 로그인 폼 예제

아이디: 비밀번호:

<form>
    <fieldset style="width: 500px; padding: 15px">
        <label style="margin-right: 30px">아이디: <input type="text" id="user_id" size="10"></label>
        <label>비밀번호: <input type="password" id="user_password" size="10"></label>
        <input type="submit" value="로그인">
    </fieldset>
</form>

4. type="search", type="url", type="email", type="tel" - 분화된 텍스트 필드

1) type="search" - 검색 상자 만들기

• 텍스트 필드를 이용해 표시했던 검색 상자가 HTML5에서는 type="search"라는 별도 유형으로 추가되었습니다.
• 하지만 크롬 브라우저나 MS 엣지 브라우저 등 일부 브라우저에서는 검색 창에 검색어를 입력 했을 때 오른쪽에 X가 표시되어 입력했던 검색어를 손쉽게 지울 수 있습니다.

 

기본형 : <input type="search" [속성="속성 값"]>

 

<input type="search">

2) type="url" - URL 입력란 만들기

• 웹 주소도 텍스트 필드에서 분화되어 type으로 별도로 지정됩니다.
• 웹 주소 필드는 전혀 공백이 없고 영문자와 마침표, 슬래시(/)로만 이루어져 있다는 점을 기준으로 구분합니다.
• type="url"을 사용했을 때 이 필드에는 반드시 'http://'로 시작하는 사이트 주소를 입력해야 합니다.

3) type="email" - 메일 주소 입력란 만들기

• 메일 주소를 입력해야 할 경우, 기존 HTML에서는 텍스트 필드를 사용해 사용자가 내용을 입력하면 자바스크립트를 이용해 '@' 문자가 들어가 있는 지 체크했습니다. 하지만 HTML5에서는 type="eamil"로 지정만 하면 브라우저 자체에서 사용자가 입력한 내용이 메일 주소 형식에 맞는지 자동으로 체크해 주기 때문에 이메일 필드를 손쉽게 만들수 있습니다.

 

기본형 : <input type="email" [속성="속성 값"]>

4) type="tel" - 전화번호 입력란 만들기

• 전화번호는 지역마다 형식이 다르기 때문에 사용자가 입력한 값을 체크하지 않고 사용자가 입력한 정보가 일반 텍스트가 아니라 전화번호라는 사실을 인식합니다.

 

기본형 : <input type="tel" [속성="속성 값"]>

<style>
    .exam1 {width: 400px; height: 500px; border: 2px solid pink; padding: 30px;}
    .exam1 form {width: 400px; text-align: right;}
    .exam1 fieldset {margin-bottom: 30px;}
    .exam1 ul {margin-right: 20px;}
    .exam1 li {list-style: none; margin-bottom: 15px}
    
</style>

<div class="exam1">
    <h2>회원 가입</h2>
    <form>
        <fieldset>
            <legend>로그인 정보</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" id="id">
                </li>
                <li>
                    <label for="pw">비밀번호</label>
                    <input type="password" id="pw">
                </li>
                <li>
                    <label for="repw">비밀번호 확인</label>
                    <input type="password" id="repw">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li>
                    <label for="user_name">이름</label>
                    <input type="text" id="user_name">
                </li>
                <li>
                    <label for="mail">메일 주소</label>
                    <input type="email" id="mail">
                </li>
                <li>
                    <label for="phone">연락처</label>
                    <input type="tel" id="phone">
                </li>
                <li>
                    <label for="homep">블로그/홈페이지</label>
                    <input type="url" id="homep">
                </li>
            </ul>
        </fieldset>
    </form>
</div>

 

 

참고 : HTML5 + CSS3 웹 표준의 정석