[HTML] form

form

사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만듭니다.

form 동작 방식

입력도니 데이터를 한 번에 서버로 전송합니다. 전송한 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹 페이지를 보여줍니다.

1. form 내용을 작성한다
2. form 안에 있는 모든 데이터를 웹 서버로 보낸다
3. 웹 서버는 받은 form 데이터를 처리하기 위해 웹 프로그램으로 넘긴다
4. 웹 프로그램은 폼 데이터를 처리한다
5. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다
6. 웹 서버는 받은 html 페이지를 브라우저에 보낸다
7. 브라우저는 받는 html 페이지를 보여준다

form 태그 사용시 주의점

form 요소를 사용할 때 주의할 사항으로는<form></form> 태그 사이에는 다른 <form> 태그가 삽입이 안되며, <form>의 이름 속성은 한 페이지에서 중복하여 사용하면 안 된다. 또, 나중에 CSS를 통해 폰트를 적용할 때 <form> 태그는 폰트가 적용되지 않으므로 따로 font를 적용해줘야 한다.

form 태그 속성

• name: 폼의 이름
• action: 폼 데이터가 전송되는 백엔드 url
• method: 폼 전송 방식 (GET / POST)
  • get : 256~4096 byte까지만 전송가능
  • post : 입력 내용의 길이에 제한 X
• target : action에 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정
• autocomplete : 자동완성. on으로 값을 주면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값을 드롭다운 옵션으로 보여준다.
• enctype : 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시
• novalidate : 폼 데이터를 서버로 보낼 때 해당 데이터의 유효성을 검사하지 않음을 명시

input

<form>태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다.실제로 사용자가 양식을 입력하기 위한 태그는<input>태그 등이 사용됩니다.

속성

readonly : 읽기 전용 필드로 만들기 placeholder : 힌트 표시(필드 클릭시 내용 사라짐) autofocus : 페이지를 불러오자 마자 특정 부분에 마우스 커서가 표시되도록 하는 것 autocomplete : 자동완성 설정 max / min : <input> 필드의 최대값과 최소값 지정 maxLength : 텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정

step : 숫자의 간격 설정 <input> 이 date, datetime, datetime-local, month, week,time, number, range일 경우만 사용가능 required : 필수 입력 필드 지정(빈칸이면 안 넘어감) type : input 태그의 타입을 지정 (바로 다음에서 자세히) 단순히 텍스트입력창인지 이메일, 전화번호 양식 혹은 파일첨부, 동영상 첨부 인지

type의 속성

type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정합니다.

• text: 일반 문자
• password: 비밀번호
• button: 버튼
• submit: 양식 제출용 버튼
• reset: 양식 초기화용 버튼
• radio: 한개만 선택할 수 있는 컴포넌트
• checkbox: 다수를 선택할 수 있는 컴포넌트
• file: 파일 업로드
• hidden: 사용자에게 보이지 않는 숨은 요소

textarea

여러 줄의 텍스트를 입력하는 창을 만듭니다.

readonly 속성을 입력하면 클릭은 가능하지만 입력은 안되며, disabled 속성은 클릭조차도 안된다.maxlength 와 minlength 로 최소, 최대 문자 수를 지정할 수 있다.

label

input 태그를 제어해 상태값을 변경하도록 돕습니다.

select & option

드롭메뉴에서 선택을 할 수 있는 태그입니다.

option은 선택된 경우 전송되는 값을 지정합니다.

datalist

리스트에서 어느 한가지를 선택하거나 키워드에 입력할 수 있습니다.

fieldset

<form>요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다. form을 효과적으로 계층화시킬 수 있습니다. <fieldset> 요소는 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줍니다. 또한, <legend> 요소를 사용하면 <fieldset> 요소의 캡션(caption)을 정의할 수 있습니다.

<fieldset> 은 블록 요소입니다.

legend

<fieldset> 의 자식 요소로 반드시 첫번째 자식요소로 사용해야한다. fieldset으로 그룹화한 그룹에 대한 그룹명, 설명 등을 설정해주는 역할을 합니다. display: inline을 해줘도 block요소처럼 동작합니다.