[TIL] Forms

Sohee Yeo·2022년 4월 1일

TIL

목록 보기

9/23

2022.03.31 Today I Learned📚

👆Form

입력하는 영역. 로그인 화면에서 아이디와 비밀번호를 입력하거나 회원 가입시 정보를 입력하는 양식 등은 모두 폼을 이용한다. 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다.

form 의 속성

<action> 입력값을 전송하는 페이지를 나타낸다.
method form의 데이터를 전송할 방법을 정의한다.

💡method의 속성
get 웹 서버에 데이터를 요청할 때 사용하며, 주소에 데이터를 입력하는 방식이다.
post 파일을 올리거나, 보안이 필요한 데이터를 전송 할 때 등 사용됩니다. 또한 주소에 입력 내용이 나타나지 않도록 합니다.
→ Password를 입력하는 form 사용시, get을 사용하면 절.대. 안 된다! 화면에는 password가 나타나지 않지만, 주소창에 password가 입력되어 나오기 때문이다.

<form action="login.html" method="get">
        <input type="text" name="userID">
        <input type="password" name="userPW">
        <button type="submit">로그인</button>
    </form>

method="get" 적용

→ 로그인 form에 ID: flo, PW: 171717을 작성해 보았다.

→ 페이지에 아무런 정보도 출력되지 않지만, 주소창에 내가 입력한 ID와 PW가 그대로 노출된다.

<form action="login.html" method="post">
        <input type="text" name="userID">
        <input type="password" name="userPW">
        <button type="submit">로그인</button>
    </form>

method="post" 적용

→ 페이지에 아무런 정보도 출력되지 않을 뿐 아니라, 주소창에 내가 입력한 정보 또한 나타나지 않는다. 보안이 필요한 정보을 전송해야 할 때는 꼭 method="post"를 사용하자!!

1. input

input 의 속성

type: 태그 모양 변경 가능. text, radio, checkbox, password, button등을 지정할 수 있음.
name: 태그 이름 지정.
readonly: 태그를 읽기 전용으로 설정.
maxlength: 최대 글자 수 지정.
minlength: 최소 글자 수 지정.
required: 필수 태그로 지정. 필수 태그 입력하지 않고 submit 버튼을 누르면 에러가 뜸.
autofocus: 웹 페이지가 로딩되면 이 속성을 지정한 태그로 포커스가 바뀜.
placeholder: 입력할 값에 대한 힌트를 줌.
pattern: 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용.

input의 타입

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>form</title>
    </head>
    <body>
        <input type="text"><br>
        <input type="password"><br>
        <input type="date"><br>
        <input type="time"><br>
        <input type="range"><br>
        <input type="color"><br>
        <input type="radio"><br>
        <input type="checkbox"><br>
        <input type="file"><br>
        <textarea name="name" rows="8" cols="80"></textarea>
    </body>
</html>

form text
password
date
time
range
color
radio
checkbox
file
name

3. label

input 태그로 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 <label> 요소를 사용하도록 권장한다.

<label> 의 사용법

텍스트의 설명과 폼 입력 모두를 포함하는 방식

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

이름 :

폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식

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

이름 :

→for 속성

for 속성은 레이블이 속한 input 과 같은 폼 컨트롤(input, select, textarea 와 같은 요소들)을 의미한다. for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야 한다. 레이블과 폼 컨트롤이 연결되면 레이블을 선택해도 해당하는 폼 컨트롤이 선택된 것과 같이 작동한다. 이러한 점 때문에 사용자는 클릭 할 수 있는 영역이 더 넓어져 폼을 쉽게 사용할 수 있게 된다.

4. select

<select> 드롭다운 리스트 박스를 생성한다. 선택해야하는 리스트 박스안의 아이템을 만들 때에는 <option> 태그를 사용한다.

<form action="">
  <label for="travCountry">방문할 국가를 선택하세요</label>
  <select name="country" id="travCountry">
    <option value="KR">대한민국</option>
    <option value="US">미국</option>
    <option value="FR">프랑스</option>
  </select>
</form>

방문할 국가를 선택하세요 대한민국 미국 프랑스

<select> 속성

multiple="multiple" : 사용자가 여러개의 option 요소를 선택할 수 있다. 단, 단순 클릭으로는 선택되지 않으며 windows 에서는 ctrl, OSX 에서는 command 버튼을 누르고 클릭해야 여러개를 선택할 수 있다.

size : 드롭다운 리스트에서 한번에 보여줄 수 있는 option의 개수를 조절할 수 있다.

<option> 속성

value : 선택값에 따라 서버에 어떠한 값을 전송할지 설정할 수 있다.
selected : 기본으로 선택되는 옵션을 나타낸다. selected 옵션을 사용하지 않으면 첫번째 <option> 이 선택된다.

5. fieldset

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

<legend> 폼 그룹의 목적을 나타내는 제목을 의미한다. 반드시 <fieldset>의 첫번째 자식으로 사용해야한다.

7. button

<button> 클릭 가능한 버튼을 나타낸다. 버튼의 모습을 다양하게 제어하고 버튼 내부에 다른 자식 요소를 추가하고 싶을 때 사용한다.

<button> 의 type

submit: 버튼이 서버로 양식 데이터를 제출한다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다. 때문에 form 양식을 제출하기 위한 용도가 아니라면 반드시 type을 선언해줍시다.
reset: <input type="reset">처럼, form의 모든 값을 초기화시킨다.
button: 클릭 가능한 버튼을 나타낸다.


<button id="search_btn" type="submit" title="검색">
	<span class="blind">검색</span>
	<span class="ico_search_submit"></span>
</button>

8. textarea

여러 줄의 text를 입력받을 수 있습니다.

cols : 입력창의 넓이. 기본값은 20이다.
rows : 입력줄 수.

<textarea name="" id="" cols="40" rows="10" maxlength="10" minlength="5"></textarea>

9. datalist

<datalist>는 <select>와 <input> 을 섞어서 사용할 수 있도록합니다. <input> 의 list 속성을 이용해 <datalist> 요소의 id 속성과 연결하여 사용합니다.

사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자 가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공합니다.

    <label for="bookGenres">원하는 도서 분야를 선택하세요 : </label>
<input type="text" id="bookGenres" list="books" name="books">
<datalist id="books">
    <option value="IT">IT</option>
    <option value="인문">인문</option>
    <option value="역사">역사</option>
    <option value="경제">경제</option>
</datalist>