자주 사용하게 되는 FORM 요소 INPUT TAG 정리

 

Form 요소

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

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

 

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

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

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

 - method 속성은 입력받은 데이터를 서버에 전달할 방식

 

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

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

 (크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용)

 

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

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

(보안성 및 활용성이 GET 방식보다 좋음)

---

  다양한 TYPE 의 INPUT 요소

•  텍스트 입력 (TEXT)

•  비밀번호 입력 (PASSWORD)

•  라디오 버튼 (RADIO)

•  체크박스 (CHECKBOX)

•  파일선택 (FILE)

•  선택 입력 (SELECT)

•  문장 입력 (TEXTAREA)

•  버튼 입력 (BUTTON)

•  전송 버튼 (SUBMIT)

•  필드셋 (FIELDSET)

---

 1. 텍스트 입력

 

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

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

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

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

</form>

 form 요소 그 자체는 웹 페이지에 나타나지 않으나, form 요소에 포함된 다양한 input 요소를 통해 사용자의 입력을 받는게 가능

 

상단 소스의 결과

 

 

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>

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

 

상단 소스의 결과

4.  체크박스

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

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

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

상단 소스의 결과

 

5. 파일 선택

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

<form>

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

</form>

accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있습니다.

상단 소스의 결과

6. 선택 입력

 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>

상단 소스의 결과

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

 

8. 버튼

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

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

    버튼을 눌러주세요.

</button>

상단 소스의 결과

8. 전송 버튼

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

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

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

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

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

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

</form> 

 

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

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

 

9. 필드셋 (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>

상단 소스의 결과