Mark Up/Html Input 요소의 속성
    Dexter_-   2018. 10. 5. 09:57
  • 728x90
    반응형


    Input 요소의 속성

    input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있다.



    value 속성


    value 속성은 input 요소의 입력 필드(input field)에 나타나는 초기값을 설정한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML Input Attributes</title>
    </head>
     
    <body>
     
        <h1>value 속성을 이용한 초기값 설정</h1>
        <form action="/examples/media/request.php">
            이름 : <br>
            <input type="text" name="student_name"><br>
            학번 : <br>
            <input type="text" name="student_id"><br>
            학과 : <br>
            <input type="text" name="department" value="컴퓨터공학과"><br><br>
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    value 속성을 이용한 초기값 설정

    이름 : 

    학번 : 

    학과 : 




    readonly 속성


    readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정한다.

    disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초기값이 서버로 전송된다는 점이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML Input Attributes</title>
    </head>
     
    <body>
     
        <h1>readonly 속성을 이용한 필드값 수정 제한</h1>
        <form action="/examples/media/request.php">
            이름 : <br>
            <input type="text" name="student_name"><br>
            학번 : <br>
            <input type="text" name="student_id"><br>
            학과 : <br>
            <input type="text" name="department" value="컴퓨터공학과" readonly><br><br>
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    readonly 속성을 이용한 필드값 수정 제한

    이름 : 

    학번 : 

    학과 : 




    disabled 속성


    disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정한다.

    disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없다.

    또한, readonly 속성과는 달리 전송 버튼(submit)을 눌러도 초기값이 서버로 전송되지 않는다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title> HTML Input Attributes</title>
    </head>
     
    <body>
     
        <h1>disabled 속성을 이용한 필드 사용 제한</h1>
        <form action="/examples/media/request.php">
            이름 : <br>
            <input type="text" name="student_name"><br>
            학번 : <br>
            <input type="text" name="student_id"><br>
            학과 : <br>
            <input type="text" name="department" value="컴퓨터공학과" disabled><br><br>
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    disabled 속성을 이용한 필드 사용 제한

    이름 : 

    학번 : 

    학과 : 




    maxlength 속성


    maxlength 속성은 입력 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정한다.


    예제

    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>HTML Input Attributes</title>
    </head>
     
    <body>
     
        <h1>maxlength 속성을 이용한 필드의 최대 길이 설정</h1>
        <form action="/examples/media/request.php">
            이름 : (이름은 10자까지만 가능해요!)<br>
            <input type="text" name="student_name" value="홍길동" maxlength="10"><br>
            학번 : <br>
            <input type="text" name="student_id"><br><br>
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    maxlength 속성을 이용한 필드의 최대 길이 설정

    이름 : (이름은 10자까지만 가능해요!)

    학번 : 




    size 속성


    size 속성은 입력 필드에 보여지는 input 요소의 크기(size)를 설정한다.

    maxlength 속성과는 달리 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미한다.

    따라서 입력될 수 있는 문자의 최대 길이는 maxlength 속성값에 따라 달라지며, size속성과는 전혀 무관하다.


    예제

    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>HTML Input Attributes</title>
    </head>
     
    <body>
     
        <h1>size 속성을 이용한 필드의 크기 설정</h1>
        <form action="/examples/media/request.php">
            이름 : <br>
            <input type="text" name="student_name" value="홍길동" size="30"><br>
            학번 : <br>
            <input type="text" name="student_id"><br><br>
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    size 속성을 이용한 필드의 크기 설정

    이름 : 

    학번 : 




    HTML5에서 추가된 form 요소의 속성


    autocomplete

    novalidate



    HTML5에서 추가된 input 요소의 속성


    autocomplete

    autofocus

    form

    fomaction

    formenctype

    formmethod

    fomnovalidate

    formtarget

    height and width

    list

    min and max

    mutiple

    pattern (정규식)

    placeholder

    required

    step








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

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

    HTML과 XHTML  (0) 2018.10.05
    HTML 과 자바스크립트  (0) 2018.10.05
    HTML 과 CSS  (0) 2018.10.04
    form 요소(feat.input 요소)  (0) 2018.10.04
    레이아웃(HTML5 추가 의미요소)  (0) 2018.10.04

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바