4. input

1. 텍스트 입력

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

<form action="/examples/media/request.php">

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

    <input type="text" name="search">

</form>

 

2. 비밀번호 입력

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

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

<form>

    사용자 : <br><input type="text" name="username"><br>

    비밀번호 : <br><input type="password" name="password">

</form>

 

3. 라디오 버튼

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

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

<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>

 

4. 체크박스(check box)

<input>태그의 type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있습니다.

체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있습니다.

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

<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>

 

5. 파일 선택 박스

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

<form>

    <input type="file" name="upload_file" accept="image/*">

</form>

 

6. 선택(select) 입력(drop-down 리스트)

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

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

<select name="fruit">

    <option value="apple"> 사과

    <option value="orange" selected> 귤

    <option value="strawberry"> 딸기

    <option value="peach"> 복숭아

</select>

 

7. 문장 입력

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

<textarea name="message" rows="5" cols="30">

    여기에 적으세요.

</textarea>

 

8. 버튼(button) 입력

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

<button type="button" onclick="alert('버튼을 클릭하셨군요!')">

    버튼을 눌러주세요.

</button>

 

9. 전송 버튼(submit)

<input>태그의 type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있습니다.

 

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

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

<form action="/examples/media/request.php">

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

    <input type="text" name="nickname" value="별명"><br><br>

    <input type="submit" value="전송">

</form>

 

10. 필드셋(fieldset)

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

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

<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>

 

datalist 요소

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

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

 

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

<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>

 

keygen 요소

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

 

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

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

<form action="/examples/media/request.php">

    사용자 : <br>

    <input type="text" name="username"><br>

    암호화방법 : <br>

    <keygen name="security"><br>

</form>

 

output 요소

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

<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>

</form>

 

for 속성을 사용하여 해당 결과에 영향을 줄 수 있는 HTML 문서 내의 요소를 명시할 수 있습니다.

이때 for 속성의 속성값에는 해당 요소의 id 속성값을 공백으로 나열해야 합니다.

 

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

요소설명

<datalist>	input 요소에 대해 미리 정의된 옵션 리스트를 명시함.
<keygen>	form 요소 안에 두 개의 key를 만들어주는 생성기를 명시함.
<output>	스크립트 등으로 실행된 계산의 결과를 바로 나타냄.

출처 : tcpschool.com/