HTML - form에 대하여 알아보자 1

본 포스트는 w3schools.com와 tcpschool.com을 참고하였습니다.

 

form 태그는 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다.

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

method는 크게 GET방식 , POST방식으로 나뉩니다.

다양한 타입의 input 요소

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

 

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

 

1. 텍스트 입력(text)

2. 비밀번호 입력(password)

3. 라디오 버튼(radio)

4. 체크박스(checkbox)

5. 파일 선택(file)

6. 선택 입력(select)

7. 문장 입력(textarea)

8. 버튼 입력(button)

9. 전송 버튼(submit)

 

1. 텍스트 입력(text):

- 텍스트 입력 공란이 하나 생기고 그 안에 텍스트를 입력하여 볼 수 있습니다.

2. 비밀번호 입력(password)

- 텍스트 입력 공란이 하나 생기고 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시됩니다.

3. 라디오 버튼(radio)

- 라디오 버튼은 여러 옵션중에서 하나의 옵션을 선택할 수 있도록 만들어졌습니다. 여기서 주의할 점은 

radio 옵션의 name속성값이 다 같아야합니다.

 

ex) 여기서 첫번째 체크박스는 체크되어 처음에 보여집니다.

<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. 체크박스(checkbox)

- 라디오버튼과 달리 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 선택받아 입력받을 수 있습니다.

ex) 여기서 첫번째 체크박스는 체크되어 처음에 보여집니다.

<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. 파일 선택(file)

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

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

6. 선택 입력(select)

선택 입력

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

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

 

7. 문장 입력(textarea):

긴 문장의 텍스트는 아예 텍스트 영역을 할당해줌으로써 활용한다.

ex)
<textarea name="message" rows="5" cols="30">
    여기에 적으세요.
</textarea>

8. 버튼 입력(button):

onclick 이벤트는 자바스크립트 기능중 하나로 버튼을 클릭시에 화면에 팝업창이 나타난다.!!

<button type="button" onclick="alert('버튼을 클릭하셨군요!')">
    버튼을 눌러주세요.
</button>

9. 전송 버튼(submit):

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 속성의 여러가지 target 속성에 대해 알아보겠습니다.

다음 포스트 클릭!! 

binarywoo.tistory.com/4

HTML - form에 대하여 알아보자 2