HTML(폼 관련 태그)

김한나·2021년 9월 6일
0

HTML

목록 보기
3/5

폼 만들기

< form > = 폼 만들기(폼을 만드는 가장 기본적인 태그 form 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다)

<--기본형-->
<form [속성="속성 값"]> 여러 폼 요소 </form>

form 태그의 속성

  • method = 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
  • get = 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남 256byte~4,096byte까지의 데이터만 서버로 넘길 수 있다
  • post = 대부분 이 방식을 사용한다.사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다.
  • name = 폼의 이름을 지정한다 한 문서 안에 여러 개의 form 태그가 있을 경우 폼들을 구분하기 위해 사용한다
  • action = form 태그 안의 내용들을 처리해 줄 시버 상의 프로그램을 지정한다
  • target = action 태그에서 지정한 스트립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다

autocomplete = 자동 완성 기능(기본값 on)

<--속성 off로 지정해 끄는 방법-->
<form action="register.php" autocomp="off">
...
</form>

< label > = 폼 요소에 레이블 붙이기(레이블이란 입력 창 옆에 아이디 나 비밀번호 처럼 붙여 놓은 텍스트)

<--기본형-->
<label [속성="속성 값"] > 레이블 <input ....> </label>

또는

<label for="id이름"> 레이블 </label>
<input id="id이름" [속성="속성 값"]>

< fieldset >, < legend > = 폼 요소 그룹으로 묶기(하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 사용, fieldset = 외곽선, legend = 제목을 붙여줌)

<--기본형-->
<fieldset [속성="속성 값"]> ... </fieldset>

사용자 입력을 위한 태그

< input > = 입력 항목 만들기(한 줄짜리 텍스트나 비밀번호 같은 부분)

<--기본형-->
<input type="유형" [속성="속성 값"]>

type 속성에서 사용 가능한 유형

  1. "hidden" = 히든 필드 만들기(화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소)
<--기본형-->
<input type="hidden" name="이름" value="서버로 넘길 값">
  1. "text" = 텍스트 필드 만들기(폼에서 가장 많이 사용하는 요소)
<--기본형-->
<input type="text" [속성="속성 값"]>

text에서 사용할 수 있는 속성
name(텍스트 필드를 구별할 수 있도록 이름을 붙인다), 
size(텍스트 필드의 길이를 지정), 
value(텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용), 
maxlength(입력 최대 문자 개수 지정)
  1. "password" = 비밀번호 입력란 만들기(value 속성이 없다는 점만 제외하면 텍스트 필드와 같다)
<--기본형-->
<input type="password" [속성="속성 값"]>
  1. "search","url","email","tel" = 분화된 텍스트 필드

  2. "number" = 숫자 입력하기

  3. "range" = 슬라이스 막대로 숫자 지정하기

<--기본형-->
<input type="number" [속성="속성 값"]>
<input type="range" [속성="속성 값"]>

사용할 수 있는 속성
min(최솟값, 기본값 1),
max(최댓값, 기본값 100),
step(짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정,기본값 1,생략가능).
value(필드에 표시할 초기값)
  1. "radio", "checkbox" = 라이더 버튼과 체크박스 넣기(하나만 선택할 경우 라디오,두 개 이상 선택할 경우 체크박스)
<--기본형-->
<input type="radio" [속성="속성 값"]>
<input type="checkbox" [속성="속성 값"]>

사용할 수 있는 속성
name(서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정),
value(선택한 라디오 버튼이나 체크박스를 서버로 알려줄 때 넘길 값 지정,영문이나 숫자 이여야 하며 필수 속성),
checked(기본으로 선택해 놓을 항목이 있다면 사용).
  1. "color" = 색상 선택 상자 표시하기(16진수로 표시, red 같은 색상 이름은 사용할 수 없음)
<--기본형-->
<input type="color" [value="기본 색" [속성="속성 값"]>
  1. "date", "month", "week" = 날짜 표시하기
<--기본형-->
<input type="date(날짜) | month(월,연도) | week(주,연도)" [value="기본 값" [속성="속성 값"]>
  1. "time", "datetime", "datetime-local" = 시간 지정하기
<--기본형-->
<input type="time | datetime | datetime-local" [value="기본 값" [속성="속성 값"]>

공통으로 사용하는 속성
min, max, stop(스핀박스의 화살표를 누를 때마다 얼마나 조절할지를 지정),
value(화면에 표시할 초기값을 지정) 
time = 00:00 ~ 23:59, 나머지는 날짜 다음 T를 쓰고 24시간제로 시간을 지정
  1. "submit", "reset" = 서버 전송, 리셋 버튼 넣기
<--기본형-->
<input type="submit | reset" [value="버튼 내용" [속성="속성 값"]>
  1. "image" = 이미지 버튼 넣기
<--기본형-->
<input type="image" src="경로" a|t="대체텍스트" [속성="속성 값"]>
  1. "button" = 버튼 넣기(스크립트 함수 등을 연결해 사용, value 속성을 사용해 버트에 표시할 내용을 지정)
<--기본형-->
<input type="button" [value="버튼 내용"] [속성="속성 값"]>
  1. "file" = 파일 첨부하기
<--기본형-->

input 태그의 다양한 속성

autofocus = 입력 커서 표시하기(페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스커서를 표시할 수 있다)

placeholder = 힌트 표시하기(사용자가 텍스트를 입력할 때 도움이 되도록 입력란에는 적당한 힌트를 표시하고 있다가 클릭하면 내용이 사라지도록 만들 수 있다)

readonly = 읽기 전용 필드 만들기(사용자에게 내용을 보여 주기만 하고 입력은 할 수 없다, true 나 false 중 하나만 사용한다)

required = 필수 필드 지정하기(필드를 비워 놓고 버튼을 눌러 전송할 경우 오류메세지를 표시한다)

여러 데이터 나열해 보여 주기

< select >, < optgroup >, < option > = 드롭다운 목록 만들기(클릭했을 때 옵션들이 요소 아래쪽으로 펼처진다, select = 드롭다운 시작과 끝 표시, option = 원하는 항목들 추가, optgroup = 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우 사용)

<--기본형-->
<select  속성="속성 값">
	<option vlaue="" [속성="속성 값"]> 내용1 </option>
    <option vlaue="" [속성="속성 값"]> 내용2 </option>
    <option vlaue="" [속성="속성 값"]> 내용3 </option>
</select>

select 속성
= size(지정한 개수보다 하나 더 많은 옵션이 표시됨)
  multiple(ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다)
  
option 속성
= vlaue(서버로 넘겨질 값을 지정)
  selected(화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정)

< textarea > = 여러 줄 입력하는 텍스트 영역 만들기(폼에서 텍스트나 항목을 선택하는 것이 아니라 직접 여러줄의 텍스트를 입력하는 영역을 만든다)

<--기본형-->
<textarea [속성="속성 값"]>내용</textarea>

속성
= name, colsm rows

기타 다양한 폼 요소

< button > = 버튼 넣기(input 태그로 삽입했던 것과 비슷하지만 button 태그를 이용해도 폼을 전송하거나 리셋 할 수 있다)

<--기본형-->
<button [type = "submit", "reset", "button"]> 내용 </button>
submit = 서버로 전송
reset = 입력한 모든 내용 초기화
button = 버튼 형태만 만들 뿐 자체 기능은 없음

< output > = 계산 결과(일반 텍스트가 아니라 계산의 결과 값이라는 점을 웹브라으저가 정확히 인식할 수 있다)

< progress > = 진행 상태 보여주기(작업 진행 상태를 나타낼 때 사용한다, 얼마나 진척되었는지 숫자로 표한한다)

<--기본형-->
<progress value="" [max=""]></progress>

< meter > = 값이 차지하는 크기 표시(progress 태그를 사용했을 때과 화면이 거의 같기 때문에 혼동되기도 하지만 meter 태그는 전체 크기 중에서 얼마나 치지하는지를 표현할 때 사용(사용량,투표율))

<--기본형-->
<meter value="" [속성="속성 값"]></meter>

속성
= min,max, value, low, high, optimum

0개의 댓글