[html, css] 5. form & input

form

html에서 form 태그는 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 기술 중에 하나이다. form은 사용자가 웹사이트에 데이터를 전송해주기도 하며, 입력 데이터를 사용하기 위해 form 태그를 활용할 수 있다.

 

form 태그의 속성

form 태그 속성	설명
method	전송 방식 선택 -get: 256~4096 byte 까지만 전송 가능 -post: 입력 내용의 길이에 제한이 없다
name	form의 이름 서버로 제출된 폼 데이터를 참조하기 위해 사용
action	form을 전송할 서버 쪽의 script 파일을 지정 전송되는 서버 url 또는 html 링크
target	action에서 지정한 script 파일을 다른 위치에 열도록 지정
autocomplete	자동 완성.  on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 드롭다운 옵션으로 보여준다.
enctype	폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시 -application/x-www-form-urlencoded: 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시. -multipart/form-data: 모든 문자를 인코딩하지 않음을 명시. 폼 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용. -text/plain: 공백 문자는 '+'기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시
novalidata	폼 데이터를 서버로 제출할 때, 해당 데이터의 유효성 검사를 하지 않음을 명시

 

input태그의 type

<input type="text"> <!--텍스트 입력-->
<input type="email"> <!--이메일 입력. @ 기호가 없을 경우 알림창 생성-->
<input type="password"> <!--비밀번호 입력. **** 처럼 문자를 가림-->
<input type="radio"> <!--라디오 버튼 생성-->
<input type="file"> <!--파일 제출 버튼 생성-->
<input type="checkbox"> <!--체크박스 생성-->
<input type="submit"> <!--서버에 제출하는 버튼 생성-->
<button type="submit">전송</button> <!--submit과 같은 동작-->
<select>
  <option>옵션1</option> <!--드롭박스 생성-->
</select> 
<textarea></textarea> <!--크기 조절이 가능한 문자 입력 박스 생성-->

 

input에 넣는 속성

<input placeholder="어쩌구" value="어쩌구" name="age">
<!--placeholder: 배경 글자. value: 미리 입력된 값. name: 서버 기능개발에 필요한 인풋의 이름-->