[Project H4C] 5. HTML 입력 양식

[Project H4C] 5. HTML 입력 양식

 

• form

사용자로부터 입력을 받거나, 사용자가 입력한 데이터를 서버에 보낼 때 사용

 

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

 

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

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

 

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

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

 

 

• method 속성

method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET or POST 방식이다.

 

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

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

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

 

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

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

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

 

• input

HTML에서 사용하는 대표적인 input 요소 타입

1. text 

2. password

3. radio

4. checkbox

5. file

6. select

7. textarea

8. button

9. submit

10. fieldset

 

• text 입력

input type="text"를 사용하여 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.

e.g.)

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

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

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

</form>

 

결과 

form 요소 그 자체는 웹페이지에 나타나지 않는다

 

 

 

• password 입력

input type="password"를 사용하여 사용자로부터 비밀번호를 입력받을 수 있다.

e.g.)

<form>

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

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

</form>

 

 

• radio button

여러 개의 옵션 중 하나의 옵션만을 입력받을 수 있다.

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

e.g.)

<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 tyep="radio" name="lecture" value="cpp"> C++

</form>

 

checked 속성으로 처음에 미리 선택되는 옵션을 지정할 수 있다. 

 

 

• file

input type="file" 을 사용하여 사용자로부터 파일을 전송받을 수 있다.

e.g.)

<form>

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

</form>

 

accept 속성을 통해 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있다.

 

 

 

• select

여러 개의 옵션이 drop-down list로 구성되며 그 중 하나만 선택 가능.

e.g.)

<select name="LOL">

    <option value="top">탑 

    <option value="middle">미드

    <option value="bottom" selecte>봇

    <option value="jungle">정글

</select>

selected 속성으로 처음에 미리 선택되는 옵션 선택 가능.

 

 

• textarea(문장 입력)

여러 줄의 텍스트를 입력받을 수 있다.

e.g.)

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

  입력하세요

</textarea>

 

   

• button

누를 수 있는 버튼을 나타낸다. 

e.g.)

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

  버튼을 눌러주세요.

</button>

 

 

• submit

input type="submit" 을 사용하여 사용자로부터 입력받은 데이터를 form handler에 제출하는 버튼을 만들 수 있다.

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

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

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

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

</form>

 

 

• fieldset

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

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

e.g.)

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

 

 

 

• input 요소의 속성

1. value: 초깃값(초기값이 아니라 초깃값이 맞는 표현...) 설정

2. readonly: 말 그대로 읽기전용. submit 버튼을 누르면 초깃값이 서버로 전송된다. 

3. disabled: 사용자가 입력 필드를 아예 사용할 수 없도록 함(클릭도 못함). submit 버튼을 눌러도 초깃값이 서버로 전송되지 않는다.

4. maxlength: 입력 필드에 입력할 수 있는 문자의 최대 길이

5. size: 입력 필드에 보여지는 input 요소의 크기를 설정. 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수.