[TIL] Forms
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>
Author And Source
이 문제에 관하여([TIL] Forms), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@florence_y/TIL-Form저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)