Web Forms

웹페이지에서는 사용자들의 정보를 입력 받아 정보를 수집하거나, ID/PW를 입력받아 로그인을 할 수 있는 기능을 할 수 있습니다. 이런 기능들을 가능하게 하는 form 에 대해 살펴보겠습니다.

폼이란?

웹사이트 사용자들이 입력하는 정해진 형식을 의미합니다. 폼은 사용자가 입력한 내용을 단순히 보여주는것 뿐만 아니라, 입력을 받아서 특정한 반응을 할 수 도 있습니다.

• contact form (연락)

• checkout form (주문)

• login form (로그인)

• comment form (댓글, 피드백)

• …

→ 데이터를 가지고 와서 사용할 수 있는 기능이 필요

💡

폼과 연계되는 기능들 입력된 데이터를 가지고 오는것 외에도 올바른 값이 입력되었는지 검증이 가능하다. (주어진 규칙에 맞는지) ex) 이메일형식 제출된 데이터를 처리하는방법 (버틍이 눌려졌을 때)

Form Element

From

form 요소로 input과 button 을 감싸줘야지 button의 제출(submit)이 발생함

• GET: 어떠한 응답을 가지고 올 때, input이 url에 추가됨

  

• POST: 해당데이터를 저장할 수 있도록 전달 (서버에서 행동발생) 백엔드 서버에서 정의된 method가 있어야됨 input이 payload로 보내짐

  

입력에 사용되는 element

기본적으로 일반 텍스트를 입력받을 수 있음 일반적으로는 type을 통해 명확하게 입력값을 정의해야됨! name 속성을 사용하여 입력된값과 key-value로 정의

Input Type

https://codepen.io/yqctutct-the-selector/pen/OJadzqJ

<textarea> : 여러줄에 걸친 텍스트 filed 특이하게 textarea는 input과 동일하게 콘텐츠가 없음에도 종료태그가 있음 이유는 모름

<select> : dropdown을 통해 선택할 수 있도록 함 list와 비슷하게 (ol|ul, li) (select, option)으로 항목을 입력함

<select name="favorite-color" id="favorite-color">
  <option value="blue">My favorite color is Blue</option>
  <option value="balck">My favorite color is Black</option>
  <option value="red">My favorite color is Red</option>
</select>

Button

입력값을 제출하기 위해 사용

form 내부에서는 제출을위해서 사용되며, 일반적으로 사용할경우 javascript를 동작하게도 할 수 있음

-- default
<button type=''>Submit</button>
type: submit|button|menu|reset

---

CSS Style

<form> 또한 마찬가지로 css로 style을 설정하고 자식노드에 상속이 가능하다

---

box-sizing: content-box | border-box | initail | inherit

• content-box : 콘텐츠 영역을 기준으로 크기를 정한다.

• border-box: 테두리를 기준으로 크기를 정한다.

• initial : 기본값으로 설정한다.

• inherit : 부모 요소의 속성값을 상속받는다.

---

input button

라벨추가

개발자도구를 통해 name을 확인 가능하지만 일반적인 이용자가 볼 수 있도록 입력값에 대한 label이 필요합니다. (기본적으로는 인라인요소임)

직접적으로 label과 input 이 연결됨을 나타낼수도 있습니다. <label for = “[id]”> <input id= “[id]”>

• 보조장치 사용자에게 해당 input의 역할 안내 (시각장애인)

• label 클릭시 연결된 input에 focusing (일반사용자)

/*
label의 for과 input의 id를 통해 서로 연관됨을 나타낼수 있음
name과 동일한 입력값을 필요로 하지 안흥ㅁ
*/
<form action="/" method="GET">
	<label for="username">Your name</label>
	<input type="text" name="user-name" id="username" />
	<button>Submit</button>
</form>

입력 유효성 검증

값이 유효하게 입력되었는지 검증하고, 유효한 값만 전달할 수 있도록 하는 방법

ex) eamil 양식

-- novalidate: 입력 유효성 검증 미실행 : 별도의 javascript로 검증하는경우 사용
<form action="/" method="GET" novalidate>

유효성 검증내역

• required
  • 필수적으로 입력되어야 되는 요소
  • 어떤 input type에도 적용 가능
    • radio에 사용시 경우 필수적으로 하나가 선택되어야함

• minlength / maxlength
  • 최소길이 / 최대길이를 지정
  • 문자길이를 조절함으로 문자 input에만 사용가능

• min / max
  • 최소 / 최대 값을 지정
  • 날짜의 경우 yyyy-mm-dd 로 지정

추가적인 기능

placeholder

• 사용자가 값을 입력하기전 회색으로 보이는 입력 예시

• 실제로 초기 값으로 입력되는 value 와는 달리 값으로 처리되지 않음

• 사용자 입력 시 사라지기 때문에 label 을 대체하는 것은 어려움

<textarea rows="">

• 값이 입력되기전 textarea의 default size

• web 상에서 화면조절도 가능하며 해당기능 제한을 위해 style 변경 필요
  • css property resize : none | horizontal | vertical | both