Mark Up/Html Input 요소의 타입
    Dexter_-   2018. 10. 5. 18:30
  • 728x90
    반응형


    Input 요소의 타입



    input 요소의 타입


    form 요소는 다양한 타입의 input 요소를 포함할 수 있다.

    HTML에서 자주 사용되는 input 요소의 대표적인 타입은 다음과 같다.


    1. text
    2. password
    3. submit
    4. radio button
    5. checkbox
    6. button

    HTML5 에서 추가된 input 요소의 타입


    HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다.


    1. 숫자 입력(number)
    2. 입력 범위 지정(range)
    3. 색상 입력(color)
    4. 날짜 입력(date)
    5. 시간 입력(time)
    6. 날짜와 시간 입력(datetime-local)
    7. 연도와 월 입력(month)
    8. 연도와 주 입력(week)
    9. 이메일 입력(email)
    10. URL 주소 입력(url)
    11. 전화번호 입력(tel)
    12. 검색어 입력(search)

    숫자 입력(number)


    <input>태그의 type 속성값을 "number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다.


    number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점이다.

    브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>number 타입을 이용한 숫자 입력</h1>
     
        <form action="/examples/media/request.php">
            여러분이 가장 좋아하는 숫자는 몇인가요?<br>
            (단, 1부터 9까지에서 골라주세요!)<br><br>
            <input type="number" name="favnum" min="1" max="9">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs

    실행결과 :

    여러분이 가장 좋아하는 숫자는 몇인가요?
    (단, 1부터 9까지에서 골라주세요!)

     


    number 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.



    입력 범위 지정(range)


    <input> 태그의 type 속성값을 "range"로 설정하면, input 요소는 일정 범위 안의 값만을 입력할 수 있도록 해준다.


    브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여 준다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>range 타입을 이용한 값의 입력</h1>
     
        <form action="/examples/media/request.php">
            여러분이 가장 좋아하는 숫자는 몇인가요?<br>
            이번에는 수평바를 조절해서 골라주세요!<br><br>
            0 <input type="range" name="favnum" min="1" max="9"> 9
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    range 타입을 이용한 값의 입력

    여러분이 가장 좋아하는 숫자는 몇인가요?
    이번에는 수평바를 조절해서 골라주세요!

    0  9 


    range 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않는다.



    색상 입력(color)


    <input>태그의 type 속성값을 "color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해준다.


    선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송된다.

    브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여준다.


    예제


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>color 타입을 이용한 색상 선택</h1>
     
        <form action="/examples/media/request.php">
            가장 좋아하는 색을 골라주세요 :<br><br>
            <input type="color" name="favcolor" value="#CC6600">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    color 타입을 이용한 색상 선택

    가장 좋아하는 색을 골라주세요 :

     


    color 타입은 사파리 9.1과 그 이전 버전, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.



    날짜 입력(date)


    <input> 태그의 type 속성값을 "date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해준다.

    브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여준다.



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>date 타입을 이용한 날짜 선택</h1>
     
        <form action="/examples/media/request.php">
            이 수업을 처음 들은 날을 기억하시나요?<br><br>
            <input type="date" name="startday">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    date 타입을 이용한 날짜 선택

    이 수업을 처음 들은 날을 기억하시나요?

     


    date 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.



    시간 입력(time)


    <input>태그의 type 속성값을 "time"로 설정하면, input요소는 사용자가 시간을 입력할 수 있도록 해준다.


    브라우저 지원 여부에 따라 시간을 선택하기 위한 도구를 보여준다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>time 타입을 이용한 시간 선택</h1>
     
        <form action="/examples/media/request.php">
            여러분이 태어난 시간은 몇 시인가요?<br><br>
            <input type="time" name="birthtime">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    time 타입을 이용한 시간 선택

    여러분이 태어난 시간은 몇 시인가요?

     


    time 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.



    날짜와 시간 입력(detetime-local)


    <input>태그의 type 속성값을 "detetime-lcoal"로 설정하면, input 요소는 사용자가 날짜와 시간을 입력할 수 있도록 해준다.


    브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더와 시간을 선택하기 위한 도구를 보여준다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>datetime-local 타입을 이용한 날짜와 시간 선택</h1>
     
        <form action="/examples/media/request.php">
            이 수업을 처음 들은 날을 골라주세요!<br>
            그렇다면 혹시 그 시간도 기억하시나요?<br><br>
            <input type="datetime-local" name="starttime">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    datetime-local 타입을 이용한 날짜와 시간 선택

    이 수업을 처음 들은 날을 골라주세요!
    그렇다면 혹시 그 시간도 기억하시나요?

     


    detetime-local 타입은 파이어폭스, 익스플로러 12와 그 이전 버전에서 지원하지 않는다.




    연도와 월 입력(month)


    <input>태그의 type 속성값을 "month"로 설정하면, input요소는 사용자가 연도와 월을 입력할 수 있도록 해준다.


    브라우저 지원 여부에 따라 연도와 월을 선택하기 위한 캘린더를 보여준다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>month 타입을 이용한 연도와 월 선택</h1>
     
        <form action="/examples/media/request.php">
            여러분이 태어난 연월을 선택해 보세요!<br><br>
            <input type="month" name="birthmonth">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    month 타입을 이용한 연도와 월 선택

    여러분이 태어난 연월을 선택해 보세요!

     


    month 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.


    연도와 주 입력(week)


    <input>태그의 type 속성값을 "week"로 설정하면, input 요소는 사용자가 연도와 몇 번째 주인지를 입력할 수 있도록 해준다.


    브라우저 지원 여부에 따라 연도와 주를 선택하기 위한 캘린더를 보여 준다.


    예제


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>week 타입을 이용한 연도와 주 선택</h1>
     
        <form action="/examples/media/request.php">
            오늘이 이번 달의 몇 번째 주인지 선택해주세요! <br>
            <input type="week" name="nthweek">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    week 타입을 이용한 연도와 주 선택

    오늘이 이번 달의 몇 번째 주인지 선택해주세요! 
     


    week 타입은 파이어폭스, 익스플로러 11과 그 이전 버전에서 지원하지 않는다.



    이메일 입력(email)


    <input>태그의 type 속성값을 "email" 로 설정하면, input 요소는 사용자가 email 주소를 입력할 수 있도록 해준다.


    브라우저 지원 여부에 따라 전송할 때 입력한 email 주소가 유효한 email 주소인지 자동으로 검사한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>email 타입을 이용한 email 주소 입력</h1>
     
        <form action="/examples/media/request.php">
            여러분의 이메일 주소를 입력해 주세요 :<br><br>
            <input type="email" name="email">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    email 타입을 이용한 email 주소 입력

    여러분의 이메일 주소를 입력해 주세요 :

     


    email 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.


    URL 주소 입력(url)


    <input>태그의 type 속성값을 "url"로 설정하면, input 요소는 사용자가 URL 주소를 입력할 수 있도록 해준다.


    브라우저 지원 여부에 따라 전송할 때 입력한 URL 주소가 유효한 URL 주소인지 자동으로 검사한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>url 타입을 이용한 URL 주소 입력</h1>
     
        <form action="/examples/media/request.php">
            TCPSchool의 URL 주소를 입력해 주세요 :<br><br>
            <input type="url" name="url">
            <input type="submit" value="전송"><br><br>
            ("http://"까지 모두 정확히 입력해야 전송할 수 있습니다.)
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    url 타입을 이용한 URL 주소 입력

    TCPSchool의 URL 주소를 입력해 주세요 :

     

    ("http://"까지 모두 정확히 입력해야 전송할 수 있습니다.)


    url 타입은 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않는다.



    전화번호 입력(tel)


    <input>태그의 type 속성값을 "tel"로 설정하면, input 요소는 사용자가 전화번호를 입력할 수 있도록 해준다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>tel 타입을 이용한 전화번호 입력</h1>
     
        <form action="/examples/media/request.php">
            여러분의 전화번호를 입력해 주세요 :<br><br>
            <input type="tel" name="tel">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs

    실행결과 :

    tel 타입을 이용한 전화번호 입력

    여러분의 전화번호를 입력해 주세요 :

     


    tel 타입은 사파리 8에서만 지원한다.


    검색어 입력(search)


    <input>태그의 type 속성값을 "search"로 설정하면, input 요소는 사용자가 검색어를 입력할 수 있도록 해준다.

    이러한 검색 필드는 보통의 텍스트 필드(text field)와 동일하게 동작한다.


    search 타입이 일반 text 타입과 다른 점은 입력 필드에 검색어를 입력하면, 입력 필드 우측에 입력된 검색어를 바로 삭제할 수 있는(X)

    표시가 생기는 점이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Input Types</title>
    </head>
     
    <body>
     
        <h1>search 타입을 이용한 검색어 입력</h1>
     
        <form action="/examples/media/request.php">
            여러분이 평소에 가장 많이 찾아본 검색어를 입력해 주세요 :<br><br>
            <input type="search" name="keyword">
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    search 타입을 이용한 검색어 입력

    여러분이 평소에 가장 많이 찾아본 검색어를 입력해 주세요 :

     




    728x90
    반응형
    저작자표시 비영리 변경금지

    'Mark Up > Html' 카테고리의 다른 글

    멀티미디어 파일 형식/비디오 (video)/오디오(audio)  (0) 2018.10.10
    Input 요소의 속성  (0) 2018.10.10
    HTML과 XHTML  (0) 2018.10.05
    HTML 과 자바스크립트  (0) 2018.10.05
    Input 요소의 속성  (0) 2018.10.05

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바