Mark Up/Html form 요소(feat.input 요소)
    Dexter_-   2018. 10. 4. 10:56
  • 728x90
    반응형



    form 요소

    (feat.input 요소)



    form


    웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

    또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다.


    form 요소는 다음과 같은 문법으로 사용한다.


    <form action="처리할 페이지 주소" method="get|post"></form>


    action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.

    이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

    method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다.


    따라서 사용자가 form 요소를 통해 입력한 데이터는 action속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.



    method 속성


    method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나워진다.


    GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식이다.

    데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적이다.

    따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용한다.


    POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식이다.

    데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다.

    따라서 보안성 및 활용성이 GET 방식보다 좋다.



    다양한 타입의 input 요소


    HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로 부터 입력을 받을 수 있다.


    HTML에서 사용할 수 있는 대표적인 input 요소의 타입은 다음과 같다.


    1. 텍스트 입력(text)
    2. 비밀번호 입력(password)
    3. 라디오 버튼(radio)
    4. 체크박스(checkbox)
    5. 파일 선택(file)
    6. 선택 입력(select)
    7. 문장 입력(textarea)
    8. 버튼 입력(button)
    9. 전송 버튼(submit)
    10. 필드셋(fieldset)

    텍스트 입력


    <input>태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML Forms</title>
    </head>
     
    <body>
     
        <h1>텍스트 입력</h1>
        <form action="/examples/media/request.php">
            검색할 내용을 입력하세요 :
            <input type="text" name="search">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    텍스트 입력

    검색할 내용을 입력하세요 : 



    비밀번호 입력


    <input>태그의 type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력 받을 수 있다.

    비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다.


    예제

    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>HTML Forms</title>
    </head>
     
    <body>
     
        <h1>비밀번호 입력</h1>
        <form>
            사용자 : <br>
            <input type="text" name="username"><br>
            비밀번호 : <br>
            <input type="password" name="password">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    비밀번호 입력

    사용자 : 

    비밀번호 : 


    라디오 버튼


    <input>태그의 type속성값을 "radio"로 설정하면, 사용자로부터 여러개의 옵션(option)중에서 단 하나의 옵션만을 입력받을 수 있다.

    이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.


    예제

    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 Forms</title>
    </head>
     
    <body>
     
        <h1>라디오 버튼</h1>
        <p>다음 중 가장 재밌고 내용이 알찬 강좌를 하나만 골라주세요.</p>
        <form>
            <input type="radio" name="lecture" value="html" checked> HTML <br>
            <input type="radio" name="lecture" value="css"> CSS <br>
            <input type="radio" name="lecture" value="java"> JAVA <br>
            <input type="radio" name="lecture" value="cpp"> C++
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    라디오 버튼

    다음 중 가장 재밌고 내용이 알찬 강좌를 하나만 골라주세요.

     HTML 
     CSS 
     JAVA 
     C++


    HTML Forms

    checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.


    정확한 입력값 전송을 위해서 radio 타입의 모든 input 요소가 반드시 같은 name 속성을 가지고 있어야 한다.



    체크박스


    <input>태그의 type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.
    체크박스는 라디와 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다.

    이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.


    예제

    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 Forms</title>
    </head>
     
    <body>
     
        <h1>체크박스</h1>
        <p>다음 중 재밌고 내용이 알찬 강좌를 모두 골라주세요.</p>
        <form>
            <input type="checkbox" name="lecture" value="html" checked> HTML <br>
            <input type="checkbox" name="lecture" value="css"> CSS <br>
            <input type="checkbox" name="lecture" value="java"> JAVA <br>
            <input type="checkbox" name="lecture" value="cpp" disabled> C++
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :


    체크박스

    다음 중 재밌고 내용이 알찬 강좌를 모두 골라주세요.

     HTML 
     CSS 
     JAVA 
     C++


    checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

    또한, disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있다.



    파일 선택


    <input>태그의 type 속성값을 "file"로 설정하면, 사용자로부터 파일을 전송받을 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML Forms</title>
    </head>
     
    <body>
     
        <h1>파일 선택 박스</h1>
        <p>여러분이 가장 행복했던 날의 사진을 선택해 주세요.</p>
        <form>
            <input type="file" name="upload_file" accept="image/*">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    파일 선택 박스

    여러분이 가장 행복했던 날의 사진을 선택해 주세요.



    선택 


    select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있다.

    option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시한다.


    예제

    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 Forms</title>
    </head>
     
    <body>
     
        <h1>선택 입력</h1>
        <p>다음 중 여러분이 가장 좋아하는 과일을 골라주세요.</p>
        <form>
            <select name="fruit">
                <option value="apple"> 사과
                <option value="orange" selected> 귤
                <option value="strawberry"> 딸기
                <option value="peach"> 복숭아
            </select>
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    선택 입력

    다음 중 여러분이 가장 좋아하는 과일을 골라주세요.


    selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.



    문장 입력


    textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML Forms</title>
    </head>
     
    <body>
     
        <h1>문장 입력</h1>
        <p>여러분의 부모님께 하고 싶은 말을 적어보세요.</p>
        <form>
            <textarea name="message" rows="5" cols="30">여기에 적으세요.</textarea>
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    문장 입력

    여러분의 부모님께 하고 싶은 말을 적어보세요.


    rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있다.



    버튼


    button 요소는 사용자가 누를 수 있는 버튼을 나타낸다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML Forms</title>
    </head>
     
    <body>
     
        <h1>버튼 입력</h1>
        <button type="button" onclick="alert('버튼을 클릭하셨군요!')">버튼을 눌러주세요.</button>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    버튼 입력



    전송 버튼


    <input>태그의 type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 

    제출하는 버튼을 만들 수 있다.


    폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.

    이러한 폼 핸들러의 주소는 form요소의 action 속성을 이용하여 명시할 수 있다.


    예제

    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>HTML Forms</title>
    </head>
     
    <body>
     
        <h1>전송 버튼</h1>
        <form action="/examples/media/request.php">
            어릴 때 자신의 별명을 적어주세요 : <br>
            <input type="text" name="nickname" value="별명"><br><br>
            <input type="submit" value="전송">
        </form> 
        <p>별명을 적으신 후에 전송 버튼을 눌러보세요!</p>
     
    </body>
     
    </html>
    		cs

    실행결과 :

    전송 버튼

    어릴 때 자신의 별명을 적어주세요 : 


    별명을 적으신 후에 전송 버튼을 눌러보세요!



    필드셋(fieldset)


    fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다.

    legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 나타낸다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML Forms</title>
    </head>
     
    <body>
     
        <h1>필드셋</h1>
        <form action="/examples/media/request.php">
            <fieldset>
                <legend>입력 양식</legend>
                이름 : <br>
                <input type="text" name="username"><br>
                이메일 : <br>
                <input type="text" name="email"><br><br>
                <input type="submit" value="전송">
            </fieldset>
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    필드셋

    입력 양식이름 : 

    이메일 : 




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


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

    1. datalist 요소
    2. keygen 요소
    3. output 요소

    datalist 요소


    datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소이다.

    사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 된다.


    단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결된다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Form Elements</title>
    </head>
     
    <body>
     
    <h1>datalist 요소를 이용한 선택</h1>
     
    <form action="/examples/media/request.php">
        <input list="lectures" name="lecture">
            <datalist id="lectures">
                <option value="HTML">
                <option value="CSS">
                <option value="JAVA">
                <option value="C++">
            </datalist>
        <input type="submit" value="전송">
    </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    datalist 요소를 이용한 선택

     

    datalist 요소는 사파리, 익스플로러9와 그 이전 버전에서 지원하지 않는다.



    keygen 요소


    keygen 요소의 목적은 사용자가 인증할 수 있는 안전한 방법을 제공하는 것이다.


    keygen 요소는 사용자가 입력한 데이터를 암호화하여 서버로 전송한다.

    이때 생성된 키(key)를 가지고 서버는 해당 사용자의 인증을 수행한다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Form Elements</title>
    </head>
     
    <body>
     
        <h1>keygen 요소를 이용한 key 생성</h1>
     
        <form action="/examples/media/request.php">
            사용자 : <br>
            <input type="text" name="username"><br>
            암호화방법 : <br>
            <keygen name="security"><br>
            <input type="submit" value="전송">
        </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    keygen 요소를 이용한 key 생성

    사용자 : 

    암호화방법 : 


    keygen 요소는 익스플로러에서 지원하지 않는다.



    output 요소


    output 요소는 스크립트(script)등으로 실행된 계산의 결과를 바로 표시해주는 요소이다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Form Elements</title>
    </head>
     
    <body>
     
        <h1>output 요소를 이용한 계산 결과 표현</h1>
     
    <form action="/examples/media/request.php"
        oninput="total.value=parseInt(value01.value)/parseInt(value02.value)">
        <input type="number" id="value01" name="input01" value="20">
        /
        ( 0
        <input type="range" id="value02" name="input02" value="50" min="0" max="100">
        100 )
        =
        <output name="total" for="value01 value02"></output><br><br>
        <input type="submit" value="전송">
    </form>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    output 요소를 이용한 계산 결과 표현

     / ( 0  100 ) = 


    output  요소는 익스플로러에서 지원하지 않는다.



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


    요소

    설명

    <datalist>

    input 요소에 대해 미리 정의된 옵션 리스트를 명시함 

    <keygen>

    form 요소 안에 두 개의 key를 만들어주는 생성기를 명시함. 

    <output>

    스크립트 등으로 실행된 계산의 결과를 바로 나타냄 


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

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

    Input 요소의 속성  (0) 2018.10.05
    HTML 과 CSS  (0) 2018.10.04
    레이아웃(HTML5 추가 의미요소)  (0) 2018.10.04
    블록과 인라인  (0) 2018.10.04
    HTML 색  (0) 2018.10.03

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바