[HTML/CSS] 폼 관련 태그들

<form> 태그 - 폼 만들기

• <form> 태그는 폼을 만드는 가장 기본적인 태그로 <form> 태그와 </form> 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다.

<form> 태그의 속성

• method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
  • 속성 값 :
    1. get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256byte ~ 4096byte까지의 데이터만 서버로 넘길 수 있다.(입력 길이에 제한을 받는다.)
    2. post : 대부분 이 방식을 사용한다. 사용자의 입력을 표준 입력(Standard input)으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러자지 않는다.
• name : 폼의 이름을 지정한다. 한 문서 안에 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 사용한다.
• action : <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
• target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
• autocomplete : 자동 완성 기능
  • on : default 값, 자동 완성을 킴
  • off : 자동 완성을 끔

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

• <label> 태그는 폼 요소에 레이블을 붙이기 위한 것이다.
• 레이블(label)이란 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트를 말한다.

label의 두 가지 사용 법

    <label> 레이블 <input.....> </label>
    ----------------------------------------------------------
    <label for = "id이름"> 레이블 </label>

    <input id = "id이름" [속성="속성값"]>

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

• 하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 사용한다.
• <fieldset> 태그는 <fieldset>과 </fieldset> 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려 주고 <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여 준다.

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

• 아이디나 검색어를 입력하는 텍스트 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그를 사용한다.

여러가지 type 속성

• hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다.
• text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다.
• search : 검색 상자를 넣는다. search 검색창에는 x 표시가 있어 쉽게 검색어를 지울 수 있다.
• tel : 전화번호 입력 필드를 넣는다.
• url : URL 주소를 입력할 수 있는 필드를 넣는다.
• email : 메일 주소를 입력할 수 있는 필드를 넣는다.
• password : 비밀번호를 입력할 수 있는 필드를 넣는다.
• datetime : 국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣는다.
• datetime-local : 사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣는다.
• date : 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다.
• month : 사용자 지역을 기준으로 날짜(연, 월)를 넣는다.
• week : 사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
• time : 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣는다.
• number : 숫자를 조절할 수 있는 화살표를 넣는다.
• range : 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
• color : 색상 표를 넣는다.
• checkbox : 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣는다.
• radio : 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.
• file : 파일을 첨부할 수 있는 버튼을 넣는다.
• submit : 서버 전송 버튼을 넣는다.
• image : submit 버튼 대신 사용할 이미지를 넣는다.
• reset : 리셋 버튼을 넣는다.
• button : 버튼을 넣는다.
  • name : 텍스트 필드를 구별할 수 있도록 이름을 붙인다.
  • size : 테스트 필드의 길이를 지정한다.
  • value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용이다. 이 속성을 사용사지 않으면 빈 텍스트 필드가 표시된다.
  • maxlength : 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정한다.
• 텍스트 필드에서 사용할 수 있는 속성 값

number, range 필드에서 사용하는 속성

• min : 필드에 입력할 수 있는 최솟값을 지정한다. (default값은 0이다.)
• max : 필드에 입력할 수 있는 최댓값을 지정한다. (default값은 100이다.)
• step : 짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정할 수 있다. (default값은 1이다.)
• value :필드에 표시할 초기값

checkbox, radio 필드에서 사용하는 속성

• checked : 라디오 버튼의 항목들은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데 기본으로 선택해 놓을 항목이 있다면 checked 속성을 사용한다.

type = "image" 사용법

<input type="image" src="경로" alt="대체텍스트">

<input> 태그의 다양한 속성들

• autofocus : 입력 커서 표시
• placeholder = "내용" : 입력창에 미리 힌트 내용 표시
• readonly="true" : 읽기 전용 필드
• required : 입력란에 필수 적으로 입력할 수 있게 하는 속성
• size, minlength, maxlength : 텍스트 글자 길이 (size : 텍스트 길이가 화면에 몇 글자까지 보이게 할지 지정)

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

• 드롭다운이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지게 하는것을 말한다.
• <select> : 드롭다운 목록의 시작과 끝을 표시
• <option> : <select> 태그 안에 <option> 태그를 사용해 원하는 항목들을 추가한다.
  • selected 속성 : <option> 태그 안에 사용하며 화면에 표시될 때 기본으로 선택되어 있는 옵션이다.
• <optgroup> : 드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우, <optgroup> 태그를 사용한다. <optgroup> 태그를 사용 할 때는 label 속성을 사용해 그룹의 제목을 붙인다.

<datalist> 태그, <option> 태그

• <datalist> 태그는 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력되는 기능이다.
• <datalist> 태그는 <input> 태그와 함께 사용하며 <input> 태그의 list 속성과 <datalist> 태그의 id 속성의 값과 같은 값으로 설정하면 된다.