[HTML] HTML 정리 - 입력 양식

• 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것

• 크게 <form>과 <input>이 있음

<form>

• 입력 양식을 만드는 가장 기본적인 태그

• method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떤 방식으로 넘겨줄지 정의하는 속성

  1. get

     데이터를 256 - 4096 byte까지만 전달 가능, 주소 표시줄에서 사용자가 입력한 데이터가 그대로 나타남

  2. post

     입력한 내용의 길이에 제한 받지 않고, 사용자가 입력한 내용이 드러나지 않음

• 허나, Javascript의 이벤트 핸들러를 사용할 경우, 이에 관해 정의하지 않음

• name : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정

• action : 태그 안의 내용을 처리해 줄 서버 프로그램을 지정

• target : 스크립트 파일을 다른 위치에서 열리도록 하는 속성

• autocomplete : 자동완성 기능에 관련된 속성으로 디폴트 값은 on, 기능을 해제할 때에는 off

<fieldset>, <legend>

• <fieldset> 하나의 폼 안에서 여러 구역으로 나눌 때 사용

• <legend>는 <fieldset>의 제목을 설정할 때 사용

<input>

• 사용자 입력을 위한 태그

• type: 입력 형태에 관련된 속성

  1. text, password

     • 전자는 한 줄짜리 텍스트를 입력할 수 있는 박스, 후자는 비밀번호를 입력할 수 있는 필드

     • size 화면에서 보이는 필드의 길이 지정, 만약 maxlength가 size보다 클 경우 size만큼만 크기에 맞추고 화면에 표시

  2. search, url, email, tel

     • search는 검색할 때 입력하는 필드

     • url은 url 주소를 입력할 수 있는 필드

     • email은 email 주소를 입력할 수 있는 필드

     • tel은 전화번호를 나타내는 필드이나, 진짜 전화번호인지 체크 불가. 모바일 환경에서는 이를 통해 바로 전화 가능

  3. checkbox, radio

     • 전자는 주어진 항목에서 2개 이상 선택할 수 있는 체크 박스이며, 후자는 주어진 항목에서 1개만 선택할 수 있는 버튼

     • value는 서버에 넘길 데이터를 의미하며, checked는 기본으로 선택해 놓고 싶은 항목에 사용

     비밀번호를 입력할 수 있는 필드

  4. number, range

     • 전자는 숫자를 입력하는 필드이나, 후자는 슬라이드 막대를 움직여 숫자를 조정하는 필드

     • max, min, step이 있음

  5. date, month, week

     • 연도, 월, 일

     • 연도, 월

     • 연도, 주

  6. submit, reset

     • 전자는 <form>의 action 속성에서 지정한 폼 처리 프로그램으로 전송

     • 후자는 <form>에 입력된 값들을 리셋

  7. file, hidden

     • 전자는 파일을 첨부할 때 사용하는 타입

     • 후자는 화면의 폼에서 보이지는 않지만, 서버에 전송될 때 같이 전송되는 필드

이외의 입력 태그

• <textarea> 여러 줄을 입력하는 텍스트 영역

• <select>, <option> 여러 옵션 중에서 선택하게 하는 드롭다운 목록

• <datalist>, <option> 미리 만들어 놓은 데이터 목록에서 같을 선택 가능