[HTML] HTML 폼(form) 삽입하기(<form>, <input>,etc)

1. 폼(form) 태그 : <form> </form>

• 기본형 :

---

<form [ 속성 = " 속성값 " ] > 폼 요소들 </form>

---

• <form> 태그의 속성 :

속성	설명
method	사용자가 입력한 내영을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. Method에서 사용할 수 있는 속성값은 get, post 이다. - get : 데이터를 256~4096 byte까지만 서버로 넘길 수 있음. 주소표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다 - post : 입력한 내용의 길이에 제한을 받지 않고, 사용자가 입력한 내용도 드러나지 않는다
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다
action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다
target	Action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 한다

 

• 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
• 폼과 관련된 대부분의 작업들은 정보를 저장, 검색 또는 수정하는 일들
• 이런 작업은 모두 데이터데이스를 기반으로 함
• 아이디를 입력하는 텍스트 필드나 버튼 같의 폼의 형태를 HTML태그
• 폼에 입력된 사용자 정보를 처리하는 것은 JSP, ASP, PHP와 같은 서버 프로그램 이용

 

2. <input> 태그 : 사용자로부터 입력을 받는 태그

• 사용자가 입력할 수 있는 입력 필드 만들기 위해 <form>태그 내부에서 사용됨
• 닫는 태그가 없으며, 여러 속성만을 포함함
• type 속성을 달리해 여러가지 형태로 나타낼 수 있다
• <input> 태그의 type 속성 :

종류	설명
text	- 한 줄짜리 텍스트를 입력할 수 있는 텍스트박스 - 주로 아이디나 이름, 주소 등 텍스트를 입력 - size(화면에 보여지는 글자 수), value, maxlength(입력할 수 있는 최대 문자 수) 속성을 가지고 있다
password	- 비밀번호를 입력할 수 있는 필드 - 사용자가 입력하는 내용이 * 나 ● 로 표시된다 - size, maxlength 속성 사용 가능
search	검색할 때 입력하는 필드
url	URL주소를 입력할 수 있는 필드
email	- 이메일 주소를 입력할 수 있는 필드 - 이메일 주소 형식 자동체크
tel	-전화번호를 입력할 수 있는 필드 -별도로 사용자 입력을 체크하지는 않는다
checkbox	주어진 여러 항목에서 2개 이상 선택할 수 있는 체크박스 - 속성 : name / value(서버에 정보를 보낼 때 넘겨줄 값 지정) / checked(기본 선택 여부)
radio	주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼
number	- 숫자 입력 필드. 숫자를 조절할 수 있는 스핀박스 - 속성 : min, max, step, value(필드에 표시할 초기값)
ramge	-숫자 입력 필드. 숫자를 조절할 수 있는 슬라이드 막대 - 속성 : min, max, step, value(필드에 표시할 초기값)
date	사용자 지역 기준 날짜(연, 월, 일), 달력 이용해 날짜 입력
month	사용자 지역 기준 날짜(연, 월), 달력 이용해 날짜 입력
week	사용자 지역 기준 날짜(연, 주), 달력 이용해 날짜 입력
time	사용자 지역 기준 시간(시, 분, 초, 분할 초)
datetime	국제표준시(UTC)로 설정된 날짜와 시간(연,월, 일, 시,분, 초, 분할 초)
datetime-local	사용자 지역 기준 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
submit	- 전송버튼. - 사용자 입력 내용을 서버로 전송
reset	- 리셋버튼 - 사용자 입력 내용 전부 삭제
image	- submit 버튼 대신 사용할 이미지 - <input type = "image" src = "이미지 경로" alt = "대체 텍스트"> 형태로 사용
button	- 일반 버튼 - submit의 기능은 없다 - 주로 버튼을 클릭해 자바스크립트 실행할 때 사용 - value 속성을 이용해 버튼 표시 내용 지정 <input type = "button" value ="버튼에 표시할 내용" >
hidden	-사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드 - 화면 상의 폼에는 보이지 않음 -폼을 서버로 전송할 때 서버로 함께 전성되는 요소
file	- 파일을 첨부할 수 있는 버튼 - "파일 선택" 이나 "찾아보기" 버튼으로 표시됨

 

3. <input>  태그의 다양한 속성

종류	설명
autofocus	페이지를 불러오자마자 원하는 폼 요소에 마우서 커서 표시
placeholder	입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
readonly	내용을 보기만 하고 입력하지 못하게 함
required	필수 필드, 오류메세지 내용은 브라우저마자 다르게 나타남

 

4. 폼에서 사용하는 여러가지 태그

 

종류	설명
<textarea>	텍스트 영역 - 여러 줄의 텍스트 입력 - 게시판 글 입력 양식, 사용자 약관 등 - 속성 : cols(가로 너비 지정), rows(세로 길이 지정)
<select> <optgroup> <option>	- 여러 옵션 중에서 선택(드롭다운 목록) - 공간을 최소한으로 사용하면서 여러 옵션 표시 가능 - <select> 태그 속성 : size(화면에 표시할 드롭다운 항목 개수 지정) , multiple(둘 이상의 항목 선택할 때 사용) - <option> 태그 속성 : value(해당 항목 선택 시 서버로 넘겨줄 값 지정), selected