[HTML] FORM 태그

Jo yun hee·2022년 4월 4일

html

HTML

목록 보기

7/7

1.<Form> 기본 속성

form은 사용자가 웹사이트에 데이터를 전송 하는 것을 허용한다.

1-1.form 동작방식

1-2.form태그의 속성

action

form data을 서버로 보낼 때 해당 데이터가 도착 할 URL을 명시

method

get
입력값이 url에 보인다 -> 보안 취약
ex) 저 멀리 계신 대표님한테 말하고 싶은 내용을 외친다. 목이 아파 많은 내용을 전달하지 못할뿐만 아니라 모든 사람들이 내용을 다 듣게된다. 그래서 get은 256~4096 byte까지만 전송이 가능하다.
post
입력값이 url에 보이지 않는다 -> 보안이 강함
ex)대표님에게 하고 싶은 말을 주변 사람들 모르게 포스트 잇에 적어 보낸다. post는 입력 내용의 길이에 제한 없이 전송이 가능하다.

2.<input>

input은 사용자에게 중요한 정보를 받는 태그이며 여러 속성들이 있고 여러가지 type들이 있다.

2-1.<input> 속성

1)name
필수적으로 input에 있어야 한다. name=""에 있는 값이 key가 된다. (즉, 서버로 보내질 때 이름의 값으로 데이터 전송)

2)value
서버전송할때 사용자가 입력한 값 (미리 정해줌)

3)readonly
읽기 전용 필드로 만들기

4)placeholder
입력 값 힌트

5)maxlength, minlength
최대 글자 수, 최소 글자 수 지정

6)required
필수 태그를 입력하지 않고, submit 버튼을 누르면 에러가 떠서 데이터 전송이 안됨

<form action="">
  <div>
    <label for="iron">아이언맨</label>
    <input type="checkbox" id="iron" name="hero" required>
  <div>
  <button></button>

7)autofocus
8)pattern

9)type

2-2.<input> type

(1)text

<input type="text" name="username">
<input type="text" name="comment" value="노코멘트">

(2)password

<input type="password" name="userpw">

(3)button

<input type="button" value="버튼">

(4)email
'@' 가 들어간 이메일 형식인지 검사해준다
(5)tel**

<form action="">
<input type="text">
<input type="tel">
<input type="email">
</form>

입력창이지만 type는 다르게 적용해야한다
why? 입력양식을 맞추기 위해서다. 입력할때 가상 키보드가 달라진다.
(6)date
날짜 입력
(7)time
시간 입력
(8)range
슬라이드 바 형식의 input
(9)number
수를 선택할 수 있는 input
(10)color
(11)radio
name이 같아야지 하나만 체크가 된다.

<fieldset>
	<legend class="hidden">회사</legend>
	<p>다음 문자중에 왠지 마음에 드는 것을 하나 고르세요</p>
	<input type="radio" name="company" value="naver" id="naver">
	<label for="naver">네</label><br>
	<input type="radio" name="company" value="kakao" id="kakao">
	<label for="kakao">카</label><br>
	<input type="radio" name="company" value="line" id="line">
	<label for="line">라</label><br>
	<input type="radio" name="company" value="coupang" id="coupang">
	<label for="coupang">쿠</label><br>
	<input type="radio" name="company" value="jeju" id="jeju">
	<label for="jeju">베</label><br>
</fieldset>

(12)checkbox
(13)file
(14)url
(15)color
(16)hidden
서버로 보내는 값들을 보내는 필드(사용자에게는 보이지 않음)

3.<label>

입력 창의 요소들을 위한 텍스트 설명. input의 짝꿍이다. 시각장애인들에게 무엇을 눌러야 하는지 알려주는 기능도 있다.

1. label로 input을 감싸는 방식

<label>
	이름 :
	<input type="text" name="name">
</label>

2. label의 for 속성과 input의 id 속성을 명시함으로써 연결해주는 방식

<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

4.<select>

드롭다운 메뉴 또는 리스트 박스를 만들 수 있다
<select>와 <option>은 짝꿍이다

<form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>

하나를 선택하고 서버에 전달하면 컨텐츠가 아닌 value값이 전달된다.
*option에 required 넣을 수 없다.

4-1.<select>의 속성들

multiple속성을 사용하면 사용자가 여러개의 option 요소를 선택할 수 있다.유저가 커멘트나 컨트롤을 누르면 동시선택 가능하다.

size 속성: 드롭다운리스트에서 한번에 보여줄 수 있는 option의 갯수 조절 가능.

4-2.<option>의 속성들

(1)value
<option> 태그에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 틀리다.
텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만 <option> 태그의 경우는 이 <option>이 선택된 경우 전송되는 값을 지정하는 것이다.

(2)selected
기본값으로 아이폰을 선택된 상태로 보여줄려면 selected 속성을 사용해야 한다.

*선택을 추가하고 싶으면

5.<fieldset>

section과 같은 역할이라고 생각하면 된다. MBTI 설문지는 매우 길다. 이와 같이 FORM이 긴거는 fieldset으로 자식 요소로 사용되는 폼 컨트롤들을 그룹화 해준다.

form 내용을 구획화 할때 사용하는 것이 fieldset!

<form action="">
  <fieldset>
    <legend>개인정보</legend>
    <label for="myName">이름</label>
    <input type="text" name="name" id="myName">
    <label for="myTel">전화번호</label>
    <input type="tel" name="tel" id="myTel">
    <label for="myEmail">이메일</label>
    <input type="email" name="email" id="myEmail">
  </fieldset>
  <fieldset>
    <legend>개인정보 제공 동의</legend>
    <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
    <input type="checkbox" name="agree" id="checkAgree">
  </fieldset>
</form>

6.<legend>

fieldset의 제목, fieldset 바로 뒤에 위치해야한다.
legend class = hidden을 주면 숨는다.

7.<button>

button은 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용한다. button을 사용할때 type 값을 꼭 넣자! 왜? submit가 기본값으로 설정되어 있기 때문이다. 또한 form안에 써야 한다. 어떤 form데이터에 보내야할지 모르기 때문입니다.

input과 버튼중 무엇을 써야합니까?
1.<input>태그는 종료태그이다. 그러므로 자식태그로 쓸수 있는게 없다. <button> 태그는 시작태그와 종료태그 사이에 글자나 이미지를 넣을 수 있다.
버튼을 이쁘게 만들고 싶다면 <button>을 사용하자.

8.<textarea>

여러줄의 텍스트를 입력받습니다

8.1 주요속성

cols 열 입력 받을 수 있는 글자의 갯수 (가로)
문자의 평균적인 넓이를 기준으로 한다
(한글:지 영문:g 는 넒이가 달라서 글자 갯수도 다르다)
rows 행 - 줄바꿈 갯수

9.<datalist>

select는 선택만 할 수 있는 반면 datalist는 리스트에서 어느 한가지를 선택하거나 키워드에 입력할 수 있다.

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>