1. 폼 태그 동작방법
1. 폼이 있는 웹페이지를 방문합니다.
2. 폼 내용을 입력합니다.
3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.
4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.
5. 웹 프로그램은 폼 데이터를 처리합니다.
6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.
7. 웹 서버는 받은 html 페이지를 브라우저에 보냅니다.
8. 브라우저는 받은 html 페이지를 보여줍니다.
2. 폼 태그 속성
폼 태그 속성에는 name, action, method, target 등이 있습니다.
폼 속성을 이용하여 전송할 때 어디로 보내야 하는지, 어떤 방법으로 보낼지 정합니다.
폼 태그 속성은 다음과 같습니다.
- action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.
- name : 폼을 식별하기 위한 이름을 지정합니다.
- accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.
- target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.
- method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET / POST)
<html>
<head>
</head>
<body>
<form action = "http://localhost:8080/form.jsp" accept-charset="utf-8"
name = "person_info" method = "get">
</form>
</body>
<html>
전송할 http 메소드 종류인 GET과 POST는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 수행하지만, 방식은 다릅니다.
GET은 폼 데이터를 URL 끝에 붙여서 눈에 보이게 보내지만
POST 방식은 내부적으로 보이지 않게 보냅니다.
* 위쪽이 GET방식 / 아래쪽이 POST방식
URL 끝에 데이터를 붙여 보내는 GET방식은 데이터가 외부에 노출되어 보안에 약합니다.
그래서 보내려는 데이터가 개인정보나 보안을 해야하는 경우는 POST 방식을 사용해야 합니다.
또한 HTTP메소드 정의에서 GET방식은 지정된 리소스에서 데이터를 요청하는 경우인 읽을 때 사용하는 메소드 입니다.
반면 POST 방식은 지정된 리소스에서 데이터를 처리할 경우인 쓰고, 수정, 삭제할 때 사용합니다.
보안이 필요하지 않으면서 지정된 리소스에서 자원을 읽을 경우에는 GET 방식을 사용하고
그렇지 않다면 POST 방식을 사용하면 됩니다.
3. 폼을 구성하는 다양한 엘리먼트
(1) 폼 엘리먼트 그룹 <field>, <legend> 태그
<fieldset> 태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용합니다.
그리고 <fieldset> 태그 하위에 <legend> 태그를 사용하면 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정합니다.
<html>
<head>
</head>
<body>
<form action = "#" accept-charset="utf-8" name = "person_info" method = "get">
<fieldset style = "width:150">
<legend>개인 정보 입력</legend>
이름 : <input type = "text" name = "name"/><br><br>
나이 : <input type = "text" name = "age"/><br><br>
</fieldset>
<br>
<fieldset style = "width:180; height:180">
<legend>여가 활동</legend>
취미 : <input type = "text" name = "hobby"/><br><br>
특기 : <input type = "text" name = "specialty"/><br><br>
</fieldset>
</form>
</body>
<html>
(2) 다양한 모양을 가진 <input> 태그
<input> 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다.
속성에는 type, readonly, maxlength 등이 있습니다.
- type : 태그 모양을 다양하게 변경할 수 있습니다. (text, radio, checkbox, password, button, hidden, fileupload, submit, reset)
- name : 태그 이름 지정합니다.
- readonly : 태그를 읽기전용으로 합니다.
- maxlength : 해당 태그 최다 글자 수를 지정합니다.
- required : 해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지 않고, submit 버튼을 누르면 에러메시지가 웹 브라우저에 출력됩니다.
- autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됩니다.
- placeholder : 태그에 입력할 값에 대한 힌트를 줍니다.
- pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용합니다.
<html>
<head>
</head>
<body>
<form action = "#" accept-charset="utf-8" name = "person_info" method = "get">
<fieldset style = "width:150">
<legend>개인 정보 입력</legend>
이름 : <input type = "text" name = "name" required/><br><br>
주민번호 : <input type = "text" name = "security_number"
pattern = "\d{6}\-\d{7}"
title = "123456-1234567 형식으로 입력해주세요"/><br><br>
아이디 : <input type = "text" name = "id"/><br><br>
패스워드 : <input type = "password" name = "password"/><br><br>
성별 : 남<input type = "radio" name = "gender" />
여<input type = "radio" name = "gender" /><br><br>
관심사 : 연예<input type = "checkbox" name = "checkbox1" />
스포츠<input type = "checkbox" name = "checkbox2" />
IT<input type = "checkbox" name = "checkbox3" /><br><br>
<input type = "submit" value = "submit"/>
<input type = "reset" value = "reset"/><br><br>
</fieldset>
</form>
</body>
<html>
<input> 태그 type 속성을 다양하게 지정하여 출력한 화면입니다.
주민번호 입력 칸은 HTML5에서 추가된 pattern 속성을 사용하여 정규표현식에 맞는 정확한 값을 입력해야 합니다.
정규표현식을 지키지 않고 submit 버튼을 누르면 정확한 입력방법 설명이 나타납니다.
체크박스는 여러개를 선택할 수 있지만, 라디오는 그룹 목록 중 하나만 선택합니다.
(3) 목록태그 <select>, <optgroup>, <option>
<select> 는 항목을 선택할 수 있는 태그입니다. 속성 중에 size와 multiple 속성이 있습니다.
size는 한번에 표시할 항목 수를 의미하고, multiple은 다중선택을 허용할 것인지를 지정하는 속성입니다.
<select> 태그 하위에 <optgroup>태그와 <option> 태그가 있습니다.
<optgroup> 태그는 <select> 태그 안에 목록들을 그룹화할 경우 사용됩니다.
label 속성을 사용하여 그룹 이름을 지정합니다.
<optgroup> 태그 하위에 <option> 태그를 포함합니다. <option> 태그는 목록을 나타내는 태그입니다.
<html>
<head></head>
<body >
<form action = "#" accept-charset="utf-8" name = "person_info" method = "get">
<fieldset style = "width:250">
<legend>개인 정보 입력</legend>
지역선택 (size, multiple속성 추가)<br>
<select name = "city2" size = "5" multiple>
<option value = "seongnam-si">성남시</option>
<option value = "suwon-si">수원시</option>
<option value = "yongin-si">용인시</option>
<option value = "anyang-si">안양시</option>
<option value = "gwacheon-si">과천시</option>
<option value = "hanam-si">과천시</option>
</select>
<br><br>
지역선택 (optgroup 태그 포함)<br>
<select name = "city1">
<optgroup label = "서울">
<option value = "songpa-gu">송파구</option>
<option value = "gangnam-gu">강남구</option>
<option value = "seocho-gu">서초구</option>
<option value = "junggu-gu">중구</option>
</optgroup>
<optgroup label = "경기도">
<option value = "seongnam-si">성남시</option>
<option value = "suwon-si">수원시</option>
<option value = "yongin-si">용인시</option>
<option value = "anyang-si">안양시</option>
</optgroup>
</select>
<br><br>
<input type = "submit" value = "submit"/>
<input type = "reset" value = "reset"/><br><br>
</fieldset>
</form>
</body>
</html>
select 박스는 size 속성을 사용하여 한번에 볼 수 있는 크기를 5개 목록으로 지정했습니다.
size 속성 기본값은 4입니다. 그리고 multiple 속성을 지정하여 한번에 여러개를 선택합니다.
아래 select 박스는 태그를 사용하여 박스 안에서 다시 그룹으로 나뉘는 것을 확인할 수 있습니다.
(4) 여러 줄 글 상자 <textarea>
여러 줄을 입력받는 태그입니다. 속성 중에 rows와 cols가 있습니다.
rows는 줄을, cols는 한줄에 입력될 크기를 지정합니다.
<html>
<head></head>
<body >
<form action = "#" accept-charset="utf-8" name = "person_info" method = "get">
<fieldset style = "width:250">
<legend>개인 정보 입력</legend>
가입 인사 <br>
<textarea name = "comment" cols = "50" rows = "5"
placeholder="가입인사를 남겨주세요."></textarea>
<br><br>
<input type = "submit" value = "submit"/>
<input type = "reset" value = "reset"/><br><br>
</fieldset>
</form>
</body>
</html>
<textarea> 태그를 사용하여 여러 줄을 입력받습니다.
rows와 cols 속성에 각각 5와 50을 지정했습니다.
placeholder 속성을 지정하여 텍스트 공간에 어떤 내용을 입력하면 되는지 힌트를 줬습니다.
'📌 Front End > └ HTML5' 카테고리의 다른 글
| [HTML] 폼(Form) 태그 종류 (0) | 2024.05.24 |
|---|---|
| [HTML] 시맨틱 태그(Semeantic Tag)란? (0) | 2024.05.13 |
| [HTML] 파비콘(favicon) 만들기 (0) | 2023.04.25 |
