Forms

FORM 기본 속성

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

폼 동작 방식

1. 웹페이지에 있는 form에 데이터를 입력합니다.
2. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동하게 됨
3. 웹 서버는 데이터를 처리하기 위해 APP 호출. 이때 APP은 물리적인 서비일 수 도 있음.
4. 필요에 따라 APP은 DB로 데이터 전송
5. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송

CRUD란?
C : Create 생성
R : Read 읽기
U : Update 갱신
D : Delete 삭제

6. 웹 서버는 받은 결과를 Client 브라우저에게 보냄.
7. 사용자 브라우저는 Response 받은 페이지를 렌더링하여 사용자에게 보여줌

폼의 속성

form의 속성의 종류
action : 입력 값을 전송할 페이지를 나타냄.
method : 폼의 데이터를 전송할 방법을 정의. method의 속성에는 get과 post 방식이 있음. get은 웹 서버에 데이터를 요청할 때 사용하며, 주소에 데이터를 입력하는 방식, post 방식은 파일을 올리거나, 보안이 필요한 데이터를 전송할 때 등 사용함. 또한, 주소에 입력 내용이 나타나지 않도록 합니다.

input

사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력 받음.

input의 속성

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

input 타입

text : 입력한 텍스트를 바로 표현
button : 버튼
password : 마스크 처리된 텍스트 인풋
search : 검색창
date : 날짜를 입력
time : 시간 입력
range : 슬라이드 바 형식
number : 수를 선택할 수 있게 함
color : 색을 선택
radio : 선택 항목 중 하나만 선택 가능
checkbox : 선택 항목중 0개 이성 선택 가능
file : 파일을 업로드 할 수 있음
email : 이메일 주소 입력
url : 웹 주소를 입력
tel : 전화번호 입력

label

단순히 인풋 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수도 있지만, 시작 장애인들도 폼을 사용할 수 있도록 시멘틱한 label 요소를 사용하도록 하자

label 사용법

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

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

2. 폼 입력에서 분리하여 for 속성을 통해 레이블을 지정

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

for 속성

레이블이 속한 인풋과 같은 폼 컨트롤(input, select, textarea 요소들)을 의미함.

select

select 요소는 드롭다운 리스트 박스를 생성합니다. 이때 사용자가 선택해야하는 리스트 박스반의 아이템을 만들 때에는 옵션 태그를 사용

<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>

select 속성

multiple="multiple" 속성을 사용하면 사용자가 여러개의 옵션 요소를 선택할 수 있게 됨. 단, 단순 클릭으로는 선택되지 않으며 윈도우 에서는 컨트롤, osx는 커맨드 버튼을 누르고 클릭해야 여러개를 선택 가능
size 속성은 드롭다운 리스트에서 한번에 보여줄 수 있는 옵션 갯수를 조절 가능

option 속성

value를 사용하여 선택값에 따라 서버에 어떤 값을 전송할지 설정
selected 속성은 페이지가 로딩되고 난 뒤 기본으로 선택되는 옵션. 사용하지 않으면 첫번째 옵션이 페이지 로드 시 선택됨, 아무것도 선택하지 않고 데이터를 서버로 전송하면 첫번째 옵션값의 벨류가 전송됨.

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>

legend

fieldset 태그 바로 뒤에 위치하며 폼 그룹의 목적을 나타내는 제목을 의미, 반드시 첫째 자식으로 사용해야함

button

클릭 가능한 버튼, 다양하게 제어하고 배누에 다른 자식 요소를 추가하고 싶을 때 사용

button 태그의 type

type은 버튼의 행동 방식을 설정하는 속성
submit - 버튼이 서버로 양식 데이터를 제출함. 지정하지 않은 경우가 기본이기 때문에 form 양식을 제출하기 위한 용도가 아니라면 반드시 type을 선언 해야함
reset - form의 모든 값을 초기화 시킴
button - 클릭 가능한 버튼. 사용자가 기능을 부여하기 전까지는 작동하지 않음.

input VS button 무엇을 써야할까?
버튼 요소는 인풋보다 스타일을 적용하기 훨씬 수월합니다. 인풋은 닫는 태그가 없기 때문에 value 특성에 텍스트 값 밖에 지정할 수 없지만, 버튼은 내부에 여러가지 자식 컨텐츠를 추가할 수 있고 여기에 더해 가상 요소 사용가능. 더 다채롭고 멋진 스타일을 적용해야 한다면 버튼요소 사용

textarea

여러줄의 text를 입력 받을 수 있음
주요속성으로 cols가 있으며 보여줄 입력창의 얿이를 뜻함. 문자의 평균적인 넓이를 기준으로 하며 양수 값만 사용, 기본은 20
rows - 기본적으로 보여줄 입력 줄 수를 의미

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

datalist

datalist 는 select와 input을 섞어 사용할 수 있도록 함. input의 list 속성을 이용해 datalist 요소의 id 속성과 연결하여 사용함.
사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공함.

<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="수성">수성</option>
    <option value="금성">금성</option>
    <option value="지구">지구</option>
    <option value="화성">화성</option>
</datalist>

자주 사용되는 속성

• checked : 체크상태 표시
• required : 필수값
• min : 최솟값
• max : 최댓값
• value : 입력된 값
• placeholder : 입력값 힌트
• minlength : 최소 길이
• maxlength : 최대 길이