HTML5 3번째- 폼 관련 태그

form은 웹문서에서 자주 사용되고 있습니다. 로그인 창이 대표적인 예입니다. 

 

<form> 태그 - 폼 만들기

 .<form [속성="속성 값"] > 여러 폼 요소 </form>

속성	설명
method	사용자가 입력한 내용들을 서버에 어떻게 넘겨줄지 지정
	속성값	get - 길이 제한, 주소 표시줄에 입력 내용 그대로 나타남
		post - 길이 제한 없음, 표준 입력 방식, 입력 내용 드러나지 않음
name	폼의 이름을 지정, 여럼 폼들을 구별하기 위해 사용
action	<form> 태그 안의 내용들을 처리해 줄 프로그램 지정
target	<action> 태그에서 지정한 파일을 현재 창이 아닌 다른 위치에 열도록 지정

 

autocomplete 속성- 자동 완성 기능

 .개인정보, 인증번호 입력 시 autocomplete="off" 하여 사용

 

<label> 태그 - 폼 요소에 레이블 붙이기

 .입력 창 옆에 붙여 놓은 텍스트 

 .<label [속성="속성 값"]>레이블 텍스트<input ...> </label>

 .또는 id 값으로 내부 input 태그 없이도 지정 가능 

<label for="id"> 레이블 텍스트 </label>

 <input id="id" [속성="속성 값"]

 .라이도 버튼과 체크박스에서 이용 시 텍스트만 터치해도 선택됨

 

<fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기

 .<fieldset [속성="속성 값"] ><legend>제목</legend> ... </filedset> 

 .외곽선으로 묶는 역할

 .<legend> 태그는 <fieldset> 태그의 제목 

 

<input> 태그 - 입력 항목 만들기

 .id 속성 적용하여 폼 요소 구분, CSS 꾸밈

 .type 속성 

 .브라우저 별 속성 지원이 다름, http://caniuse.com의 접속 후 [index of features] 링크 클릭

유형	설명
hidden	사용자에게 보이지 않고 서버로 넘겨지는 값 <input type="hidden} name="이름" value="서버로 넘길 값">
text	한 줄짜리 텍스트 입력 상자 name 속성 : 텍스트 필드 구별  size 속성 : 필드 길이 지정, 필드 내 보이는 글자 수  value 속성 : 텍스트 필드 부분에 표시될 내용  maxlength : 입력할 수 잇는 최대 문자 개수 지정
search	검색 상자 <input type="search"> <input type="submit" value="검색">
tel	전화 번호 입력 필드 텍스트 필드 기반으로, 바로 전화 걸 수 있도록 함
url	URL 주소를 입력할 수 있는 필드 텍스트 필드와 같음 'http://'로 시작하는 주소를 입력해야함
email	메일 주소를 입력할 수 있는 필드 자동으로 입력 내용이 메일 주소 형식에 맞는지 체크 <input type="email" >
password	비밀번호를 입력할 수 있는 필드 내용 표시되지 않고 *으로 표시 value 속성은 없으며 텍스트 필드와 같음
datetime	국제 표준시로 설정된 날짜와 시간(연,월,일,시,분,초,분할 초)
datetime-local	사용자 지역 기준 날짜와 시간(연,월,일,시,분,초,분할 초)
date	사용자 지역 기준 날짜(연,월,일) "yyyy-mm-dd"
month	사용자 지역 기준 연, 월 "yyyy-mm"
week	사용자 지역 기준 연, 주 "yyyy-w24"
time	사용자 지역 기준 시,분,초,분활 초 min 속성 max 속성 step 속성 :  스핀 박스의 화살표 누를 떄마다 날짜나 시간을 얼마나 조절할지 지정 value 속성 : 화면에 표시할 초기값 지정, time 00:00, datetime T18:00
number	숫자를 조절할 수 있는 화살표 입력 내용을 숫자로 인식 브라우저 따라 스핀 박스가 표시 ( 주문 개수 )
range	숫자 조절 슬라이드 막대 number 와 같이 사용할 수 있는 속성 min : 입력할 수 있는 최소값, 기본 값 0 max : 입력할 수 있는 최대값, 기본 값 100 step : 숫자 간격 지정, 기본 값 1 value : 필드에 표시할 초기값
color	색상 표 <input type="color" value="#00ff00>
checkbox	2개 이상 선택 가능한 체크 박스 name 속성 : 체크 박스가 여러 개 있을 경우 구분하기 위해 이름 지정
radio	1개만 선택 가능한 라디오 버튼 name 속성 : 여러 개 중 하나만 선택할때 관련 그룹 동일한 name 속성 값 적용 value 속성 : 선택한 버튼을 서버로 넘길 값 지정, 영문이나 숫자, 필수 속성 checked 속성 : 라디오 버튼들 중 기본으로 선택해 놓을 항목에 사용
file	파일을 첨부할 수 있는 버튼 <input type="file" [속성="속성 값"]>
submit	서버 전송 버튼 <form> 태그에 지정한 프로그램으로 입력한 정보 전달
image	submit 버튼 대신 사용할 이미지 <input type="image" src="경로" alt="대체텍스트" [속성="속성 값"]>
reset	리셋 버튼 사용자가 입력한 모든 정보를 재설정 value 속성 : 버튼에 표시할 내용 지정
button	버튼  스크립트 함수 연결해 사용  value : 버튼에 표시할 내용 지정 <input type="button" value="새 탭 열기" onclick="window.open()">

 

<input> 태그의 속성

 

autofocus 속성 - 입력 커서 표시하기

 .마우스 커서 표시 

 

placeholder 속성 - 힌트 표시하기

 .텍스트 필드에 힌트 내용 표시

 

readonly 속성 - 읽기 전용 필드 만들기

 .readonly 만 쓰거나 readonly="true"로 표기 

 

required 속성 - 필수 필드 지정하기

 .submit 버튼 클릭 시 폼을 서버로 전송하는데 필수 필드 검사

 .required="required"이거나 required만 입력하면 됨

 

min, max, step 속성

 .두 가지 속성 함께 써서 최소, 최대 모두 지정 가능 

 .step 속성은 허용된 범위 내의 숫자의 일정한 간격을 가리킴

 .태그의 유형이 date이거나, datetime, datetime-local, month, week, time, number, range 인 경우 사용 가능

 

size, minlength, maxlength 속성- 길이, 최소 최대 길이 속성

 .텍스트 길이 조건 시 사용 

 .size는 화면에 보이는 글자 수 지정

 .min, max는 입력 가능한 글자 지정

 

속성	설명
formation	실행할 프로그램 연결, type = sumit, image일 때 사용
formenctype	서버로 폼을 전송했을 때 어떤 방식으로 해석할 것인지 지정 type = sumit, image 일때 사용
formmethod	서버로 폼을 전송하는 방식(get, post) 지정, <form> 태그 안에서 지정한 방식이 있어도 우선됩니다.
formnovalidate	<form> 태그 안에 novalidate 라는 속성이 있어 전송 할 때 데이터가 유효한지 여부를 표시할 수 있는데, <input> 태그 안에서도 formnovalidate 속성을 이용해 유효성 여부를 표시
formtarget	폼 데이터를 서버로 전송한 후 응답을 어디에 표시할 것인지 타깃을 지정
height, width	image 타입 일때 너비와 높이 지정
list	<datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나영해 보여줌
multiple	type="email" "file" 일 때 두 개 이상의 값 입력 <input> 태그 안에 속성 이름만 표시하면 됨

 

<select>, <optgroup>, <option> 태그 - 드롭다운 목록 만들기

 .여러 옵션 중에서 선택하도록 할 때 사용

 .<select> 태그로 시작과 끝을 표시하고 그 안에 <option> 태그를 사용해 원하는 항목들을 추가

 .<option> 안의 value 속성이 서버로 전송되는 값

 .<select 속성="속성 값" >

      <option value="값1" > 내용1</option>

      <option value="값2" > 내용2</option>

      <option value="값3" > 내용3</option>

</select>

내용1 내용2 내용3

 

<select > 속성

 .size : 화면에 표시될 드롭다운 메뉴의 항목 개수 지정

 .multiple : 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 메뉴에 있는 여러 항목 선택 가능

 

<option> 속성

 .value : 옵션을 선택했을 때 서버로 넘겨질 값 지정

 .selected : 화면에 표시할 때 기본으로 선택되어 있는 옵션 지정

 

<optgroup> 태그 - 옵션끼리 묶기

 .label 속성으로 option들을 묶음 

 .<optgroup label="공과대학">

    <option >건축공학과</option>

 </optgroup>

 

<datalist>, <option> 태그

 .텍스트 필드에 직접 값을 입력하는 것이라니 선택하면 그 값이 자동 입력 

 .<input > 태그와 함께 사용되어 list 속성과 <datalist> 의 id 속성을 동일하게 설정 

 .text 속성은 대부분 지원하지만, number, range, color 는 브라우저별 지원하지 않을 수 있음

 

<textarea> 태그 - 여러 줄 입력하는 텍스트 영역

 .여러 줄 입력할 때 사용하는 폼

 .게시물을 입력하거나 사용자 약관을 표시할 때 자주 사용

 .name 속성 : 다른 폼 요소와 구분하기 위한 이름 지정

 .cols 속성 : 텍스트 영역의 가로 너비를 문자 단위로 지정

 .rows 속성 : 세로 길이를 줄 단위로 지정, 많을 시 스크롤 막대 생성

 

<button> 태그- 버튼 넣기

 .<input> 태그의 button 속성과 동일한 역할

 .<button [type="submit | reset | button" ] 내용 </button>

 .submit : 폼을 서버로 전송합니다.

 .reset : 폼에 입력된 모든 내용을 초기화 

 .button :  버튼 형태만 만들 뿐 자체 기능 없음

 .<input> 태그와 차이점 : 화면 낭독기에서 정확히 전달 가능

 .아이콘을 추가하거나 CSS 로 형태 꾸임 가능

 

<output> 태그 - 계산 결과 

 .일반 텍스트가 아니라 계산의 결과 값

 .<form onpinput="result.value=parseInt(num1.value)+parseInt(num2.value)">

   <input type="number" name="num1" value="0">

   +<input type="number" name="num2" value="0">

   =<output name="result" for="num></output>

</form>

+

=

*parselnt = 데이터형을 정수로 변환 

 

<progress> 태그 - 진행 상태 보여주기

 .시작을 0, 최종 완료를 최댓값으로 해 숫자로 표현

 .<progress value="값" [max="값"] ></progress>

 .value 속성 : 진행상태를 나타내며 부동 소수점 표현

 .max 속성 : 최댓값

     

<meter>태그 - 값이 차지하는 크기 표시

 .진행 상황보다 하드 디스크 전체 용량 중 얼마나 사용되고 있는지 표시할 떄 

 .min, max : 범위의 최솟값, 최댓값, 기본 0부터 1

 .value : 범위 내 차지하는 값

 .low : 낮다 할 정도의 값 지정

 .high : 높다 할 정도의 값 지정

 .optimum : 적당하다 할 정도의 범위를 지정