h25. HTML 폼 개요

HTML 폼 개요

<form> 태그는 사용자로부터 데이터를 입력받기 위해 사용되는데, <form> 태그는 HTML 의 형태를 정의하는 기능을 합니다.

이 폼 태그에는 여러가지 형태가 있는데, input 태그, 체크 박스, 라디오 버튼, submit 버튼 등이 있습니다.

<input> 태그는 가장 중요한 태그인데 <input> 태그는 형태 속성에 따라 종류가 많습니다.

텍스트를 입력 받는 경우에는 <input type="text"> 로 생성합니다. 

그리고 Name 속성이 있어야만, 정상적으로 데이터가 전송되므로, 각 input 필드는 반드시 name 속성을 가져야 합니다.

텍스트 필드는 기본적으로 20 문자를 입력할 수 있는 공간을 가집니다.

<form>가입동기를 입력하세요:
<input name="가입동기" type="text" />
각오를 입력하세요:
<input name="나의각오" type="text" /></form>

가입동기를 입력하세요: 각오를 입력하세요:

---

라디오 버튼은 <input type="radio"> 로 생성합니다. 

라디오 버튼은 사용자가 제한된 개수 중에 하나를 선택 하게 할 때 사용됩니다.

<form><input checked="checked" name="부페종류" type="radio" value="조식" /> 조식
<input name="부페종류" type="radio" value="중식" /> 중식
<input name="부페종류" type="radio" value="석식" /> 석식</form>

조식 중식 석식

---

Submit 버튼은 <input type="submit"> 로 생성해서 데이터를 폼-핸들러로 전송하는데 사용됩니다.

폼-핸들러는 일반적으로 서버 측의 페이지로서 입력데이터를 전송받아 처리하는 스크립트를 내포하게 됩니다. 

이 폼-핸들러는 폼의 액션 속성으로 지정합니다.

액션 속성은 폼이 제출될 때 수행되어야 할 액션을 지정하는데, 일반적으로 submit 버튼을 클릭할 때 서버측으로 폼을 제출하는 방법을 정의합니다.

흔히 폼은 웹 서버의 특정 웹 페이지로 전송되는데, 서버측 스크립트가 정의되어 있는 특정 파일(핸들러)로 폼을 넘겨 줍니다.

액션 속성이 생략되면, 해당 액션은 현재의 페이지 내에서 처리되는 것으로 설정됩니다.

<form action="서버측 스크립트가 정의되어 있는 페이지.php"></form>

<form action="서버측 페이지.php">
 <fieldset>
 <legend>가입동기를 입력하세요:</legend>
 <input name="가입동기" type="text" value="평소에 관심이 많았어요." />
 각오를 입력하세요:
 <input name="나의각오" type="text" value="최선을 다해볼 생각입니다." />
 <input type="submit" value="Submit" /></form>
 </fieldset>
</form>

가입동기를 입력하세요:

각오를 입력하세요:

폼 태그 내의 매소드 속성은 HTTP 매소드 즉 GET 방식 또는 POST 방식을 지정하는데 이들은 폼을 제출할 때 전송하는 방식입니다.

<form action="서버측 페이지.php" method="get">

아니면,

<form action="서버측 페이지.php" method="post">

GET 방식을 사용하는 경우 (기본적으로 GET 방식이 적용됨) 는 다음과 같은 경우 입니다.

폼 제출이 검색엔진에 쿼리를 보내는 것처럼 수동적인 경우, 민감한 정보를 갖고 있지 않은 경우 

그리고 전송하는 데이터 양이 크지 않은 경우에 사용되는 방식입니다.

GET 방식을 사용할 때는, 폼 데이터가 아래와 같이 페이지 주소에 보이게 됩니다.

브라우저 주소창 : 
서버측 페이지.php?가입동기=평소에 관심이 많았어요.&나의각오=최선을 다해볼 생각입니다.

반면에 POST 방식은 폼 데이터가 기존의 데이터를 업데이트 하는 경우이거나, 또는 패스워드 같은 민감한 정보를 담고 있는 경우에 사용됩니다.

POST 방식은, 전송되는 데이터가 페이지 주소에 보이지 않는 다는 면에서 보안이 더 우수한 방식입니다.

폼 데이터를 그룹핑하여 표현하려면 <fieldset> 태그를 사용합니다.

<fieldset> 태그는 폼 내에 관련된 데이터 끼리 그룹으로 묶어 줍니다.

<legend> 태그는 <fieldset> 태그의 캡션(제목)을 표시해 줍니다.

---

<style>
input[type=submit] {
width: 120px;
margin-left: 10px;
display: block;
background-color: yellow;
}
</style>

<form action="https://www.google.co.kr/search" method="get" target="_blank">
<fieldset>

<legend>검색할 단어를 입력하세요</legend>
<input name="q" type="text" value="VEVO"><br /><br />

<legend>비디오 뉴스 앱 중에서 선택하세요.</legend>
<input checked="checked" name="tbm" type="radio" value="vid"> 비디오
<input name="tbm" type="radio" value="nws"> 뉴스
<input name="tbm" type="radio" value="app"> 앱 <br /><br />

<input type="submit" value="검 색">
</fieldset></form>

검색할 단어를 입력하세요

비디오 뉴스 앱 중에서 선택하세요.

비디오 뉴스 앱

<form action="서버측 페이지.php" method="get">

아니면,

<form action="서버측 페이지.php" method="post">

기본적으로 GET 방식이 적용됩니다.
GET 방식을 사용할 때는, 폼 데이터가 페이지 주소에 보이게 됩니다.
POST 방식은, 전송되는 데이터가 페이지 주소에 보이지 않는 다는 면에서 보안이 더 우수한 방식입니다.

---

[광고] Udemy 동영상 강의로 보기