[HTML] form 관련 tag

 

 

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

■ <form>

  : 폼 생성

    <form>과  </form> 사이에 폼과 관련된 요소의 태그들을 삽입한다. (여러 개일 경우 <ul>과 <li>등을 이용)

 

  * <form>의 속성

method	전송방식 설정 get : 256~4096 byte만 서버로 넘길 수 있음. post : 입력 길이에 제한이 X
name	폼을 식별하기 위한 이름
action	폼을 전송할 서버 쪽의 script 파일을 지정 ( onsubmit 이벤트를 이용해  script 로 처리할 수도 있다.)
target	action에서 지정한 script파일을 현재 창이 아닌 다른 위치에 열도록 지정.

 

 

■ <fieldset>, <legend>

  : 폼의 요소들을 그룹으로 묶어주는 태그.

    하나의 폼 안에서 여러 구역을 나눠 표시하려고 할 때 <fieldset>을 이용하면 영역을 다르게 묶고 외곽선을 그려준다.

    <legend>는 <fieldset>으로 나눠진 구역에 이름을 붙일 때 사용한다.

 

  * <fieldset>의 속성

disabled	<fieldset> 의 자식 요소들을 사용할 수 없게 만든다. (화면에는 표시되지만, 사용자가 내용을 입력하거나 항목을 선택할 수는 X)
form	현재 <fieldset>이 속해있는 <form>의 이름을 표시
name	서버로 넘겨줄 이름 지정

 

 

■ <label>

  : 폼에 캡션을 달 때 사용하는 태그

     radio button 이나  checkbox 를 텍스트와 함께 <label>로 묶어주면 텍스트를 선택해도  button 부분이 같이 선택되어 편리하게 만들 수 있다. CSS설정을 좀 더 세밀하게 하기 위해서 사용하기도 한다.

 

 

■ <input>

  : 입력창 생성

     id 를 붙이면  form 을 서로 구분해 사용할 수 있다.  type 에 따라 입력 가능한 정보를 설정해 줄 수도 있다.

 

  * <input>의 속성

readonly	읽기 전용으로 만듦.(입력, 수정 X)
placeholder	필드안에 힌트내용을 표시(클릭하면 사라짐)
autofocus	페이지를 불러오자 마자 해당 부분에 마우스 커서가 표시되도록 함.
autocomplete	자동완성
min / max	최댓값과 최솟값(같이 사용하면 입력할 수 있는 값의 범위를 지정해 줄 수 O)
maxlength	최대로 입력할 수 있는 문자의 개수
step	허용된 범위 내의 숫자의 일정한 간격  type 이 date, datetime, datetime-local, month, week,time, number, range인 경우만 사용 가능
required	필수 필드 지정(내용이 채워지지 않으면 오류 메시지 표시)

 

  * <input>의 type속성 

키워드	설명
hidden	서버로 넘겨지는 값(사용자에게는 보이지 X) 사용자가 입력하지 않아도 되는 정보들(가입 날짜, 가입경로 등)
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
search	검색상자
tel	전화번호 입력 필드
url	URL주소 입력 필드
email	메일주소 입력 필드
password	비밀번호 입력 필드(입력 내용이 그대로 보이지 X)
number	숫자를 조절할 수 있는 화살표
range	숫자를 조절할 수 있는 슬라이드 막대
color	색상표
checkbox	체크박스(2개이상 선택 가능)
radio	라디오 버튼(1개만 선택 가능)
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 시, 분, 초, 분할 초)
datetimd-local	사용자가 있는 지역을 기준으로 한 날짜와 시간(연, 월, 시, 분, 초, 분할 초)
data	사용자 지역을 기준으로 한 날짜(연, 월, 일)
month	사용자 지역을 기준으로 한 날짜(연, 월)
week	사용자 지역을 기준으로 한 날짜(연, 주)
time	사용자 지역을 기준으로 한 시간(시, 분, 초, 분할 초)
button	버튼
file	파일 첨부 버튼
submit	서버전송 버튼
image	이미지 버튼
reset	리셋 버튼

 

  * type="text"의 속성

name	텍스트 필드를 구별할 이름
size	화면에 몇 글자를 입력할 수 있게 할 것인지 설정하는 값
value	텍스트 필드가 화면에 표시될 때 안에 기본으로 표시될 내용 속성을 사용하지 않으면 빈칸으로 나옴
maxlength	입력할 수 있는 최대 문자 개수

 

  * type="number", type="range"의 속성

min	입력할 수 있는 최솟값 지정, default는 0
max	입력할 수 있는 최댓값 지정, default는 100
step	숫자의 간격 지정(생략 가능)
value	필드에 표시할 초기값

 

  * type="radio", type="checkbox"의 속성

name	버튼끼리 서로 구분하기 위한 이름 ( raido button 의 경우 같은 그룹끼리는  name 을 같게 해주면 된다.)
value	선택했을 때 서버로 넘길 값
checked	사용하면 처음에 선택된 상태로 표시

 

  * type="time"및 시간을 나타내는 유형에서 사용할 수 있는 속성 

min	날짜나 시간의 최솟값 지정
max	날짜나 시간의 최댓값 지정
step	스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절되게 할지 지정하는 값
value	화면에 표시할 초깃값

 

 

■ <select>,<option>,<optgroup>

  : 드롭다운 목록

    <select>와 </select>사이에 <option>을 넣어서 만든다.  value 속성을 사용하여 서버로 넘길 값을 지정해야 한다.

   여러 항목들을 그룹으로 묶어야 할 경우 <optgroup>을 사용하고  lebel 속성을 사용해서 그룹의 제목을 붙여준다.

<select 속성="속성 값">    <optgroup label="그룹 이름">       <option value="서버로 넘길 값" 속성="속성 값"> 목록 내용 1 </option>       <option value="서버로 넘길 값" 속성="속성 값"> 목록 내용 2 </option>       <option value="서버로 넘길 값" 속성="속성 값"> 목록 내용 3 </option>    ...    </optgroup> </select>

 

  * <select>의 속성

size	화면에 표시될 옵션의 개수(목록이 많을 경우 스크롤 생성) 사용하지 않을 경우 화면의 한 개의 항목만 보이고, 화살표를 누르면 전체 항목이 나온다.
multiple	여러 개의 옵션을 선택하게 할 수 있음( Ctrl  + 항목클릭)

 

  * 드롭다운 <option> 속성 

value	옵션을 선택했을 때 서버로 넘길 값
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정

 

 

■ <datalist>, <option>

  : 데이터 리스트

    텍스트 필드에 입력할 수 있는 값들을 목록으로 제시해주어 쉽게 값을 입력할 수 있도록 한다. 

    입력 필드가 있어야 하기 때문에 <input>과 같이 사용한다.

<input type="text" list="데이터 리스트 id">    <datalist id="데이터 리스트 id">       <option value="목록 값 1"></option>        <option value="목록 값 2"></option>        <option value="목록 값 3"></option>        ...    </datalist>

 

  * 데이터리스트 <option> 속성

value	사용자가 레이블을 선택했을 때 서버로 넘겨질 값
label	사용자를 위해 브라우저에 표시할 레이블 값 (따로 지정하지 않을경우 value의 값을 사용)

 

 

■ <textarea>

  : 텍스트 상자

  게시글을 입력할 때처럼 한 줄 이상의 문장을 입력해야 할 때 주로 사용한다.

 

  * <textarea>의 속성

name	텍스트 영역의 이름 지정
cols	텍스트 영역의 가로 너비를 문자단위로 지정
rows	텍스트 영역의 세로 길이를 줄단위로 지정(지정한 숫자보다 줄 개수가 많아지면 스크롤 생성)

 

 

■ <button>

  : 버튼

   페이지에 버튼을 넣어 폼을 전송하거나 리셋할 수 있다.

    <input>보다 시각적인 효과를 줄 수 있다.(아이콘을 추가한다거나 CSS를 설정할 수 있다.)

 

  * <button> type 속성

submit	폼을 제출  <button type="submit"> 전송하기  </button>
reset	폼에 입력한 내용을 리셋  <button type="reseet" 다시쓰기  </button>
button	버튼 형태만 생성, 다른 동작을 하려면 따로 함수를 연결해야한다.

 

 

■ <output>

  : 결과 출력하기

  화면에는 다르게 표시되지 않지만 <output>으로 묶은 부분이 일반 텍스트가 아닌 계산 결괏값이라는 점을 웹 브라우저에게 알려줄 수 있다.

 

 

■ <progress>

  : 진행상태 보여주기

  작업의 시작을 0으로 하고 최종 완료를 최댓값으로 하여 얼마나 진척되었는지 숫자로 표현해준다.(단위 X)

 

  * <progress>의 속성

value	작업이 얼마나 진행되었는지 나타낸다.(부동소수점 사용)  0 <= 값 <= max여야 한다. (max가 없을 경우 1.0보다 작아야 한다.)
max	작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현한다.( 0 <= 값 이어야 한다.)

 

 

■ <meter>

  : 값이 차지하는 크기 표시

    <progress>와 달리 전체 값에서 해당 값이 어느 정도 차지하고 있는지를 표현한다.  

 

  *<meter>의 속성

max / min	범위의 최댓값과 최솟값(default는 1과 0)
value	범위 안에서 차지하는 값
low	"이 정도면 낮다"라고할 정도의 범위값 지정
high	"이 정도면 높다"라고할 정도의 범위값 지정
optimum	"이 정도면 적당하다"라고할 정도의 범위값 지정