HTMLCSS

HTML form 태그에 대해 알아본다.

2021년 08월 19일

html form

<form>태그는 웹 페이지에서의 입력 양식을 말한다.
로그인 창이나 회원가입 폼 등이 바로 <form>태그를 사용하고 있다.
이 <form>태그는 입력된 데이터를 한 번에 서버로 전송한다.
특히 백엔드를 공부하는 사람들은 이 <form>태그 정도는 자세히 알면 좋다.
구성을 살펴보자.

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" /><br /><br />
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" /><br /><br />
  <input type="submit" value="Submit" />
</form>

이 예제에서 <form>을 구성하는 요소들을 살펴보겠다.

action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
name : 폼을 식별하기 위한 이름
method : 서버에 전송할 http method (GET or POST)
input type : 입력받을 요소의 종류를 정한다.
label : 폼 위젯과 라벨을 연결하는데 사용되는 것으로 보통 <input>의 이름을 작성함. 클릭 시 해당 input박스가 활성화되며 접근성 측면에서도 사용해 주는 게 좋음.

GET과 POST의 차이

get_post

GET : URL 끝에 데이터를 붙여 보내며 데이터가 외부에 노출되어 보안에 취약함. GET방식은 지정된 리소스에서 데이터를 요청하는 경우에만 사용함.(읽어올때)
POST : 지정된 리소스에서 데이터를 처리할 수 있음.(추가/수정/삭제 등) 데이터가 외부에 노출되지 않기 때문에 보안상의 이유가 있다면 POST 방식을 사용하는 것이 적절함.

input 요소

text="text" : 속성값 text는 input요소의 기본값으로 텍스트를 입력할 수 있는 텍스트 필드가 만들어진다.
텍스트 필드의 세로 크기는 정해져 있고 가로 크기만 설정할 수 있다.
크기는 글자 수를 기준으로 정해지며 기본 크기가 20이다.

label 요소

인풋 텍스트 요소와 같은 것은 박스만 있기 때문에 어떤 것을 해야할 지 모른다. 때문에 인풋 요소에는 label을 주어야 한다.

label : 컨트롤에 레이블(이름)을 붙이고자 하는 경우에 사용한다.
label은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다.
브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 label요소를 사용해야 한다.

input 속성값

name : 서버에 값을 전송하기 위해 사용
placeholder : 사용자가 어떤 말을 입력해야 될지 도움말을 주기 위해서 사용
value : 타입 요소에 입력되어 있거나 입력 받는 값
readonly : 읽기만 가능하고 사용자가 입력할 수 없도록 설정(읽기 전용)
required : 필수 입력값으로 입력되어 있지 않다면 서버 전송시 오류가 발생하게 된다.(필수 입력 사항의 경우에 사용)
disabled : 비활성화 상태로 어떠한 작업도 할 수 없는 상태로 됨.
minlength : 입력할 수 있는 값의 최소 길이를 설정
maxlength : 입력할 수 있는 값의 최대 길이를 설정

type의 종류

text, password, checkbox, radio, file, submit, button, image, reset, hidden, search, url, tel, email, date, month, week, time, datetime-local, number, range, color

사용예시

<!-- 사용 예시 -->
<input type="password" placeholder="비밀번호를 6자리 입력해주세요." />
<input type="submit" value="전송" />
<input type="button" value="버튼" />
<input
  type="image"
  src="https://goo.gl/Ng66oQ"
  alt="체크인"
  width="20"
  height="20"
/>
<input type="reset" value="초기화" />
<input type="hidden" name="using-ajax" value="true" />
<input type="number" name="" id="" min="100" step="10" max="1000" value="150" />
<input type="range" name="" id="" min="10" step="5" max="25" value="15" />
<input type="color" name="" id="" value="#F7CC60" />

type=”submit”

속성값 submit은 전송 버튼이 만들어 진다.
전송 버튼은 폼을 서버로 보내는 역할을 수행할뿐 어떻게 어디로 보낼지는 form 요소에서 정한다.
버튼 이름은 value 속성에 의해 지정되는데 이 속성을 지정하지 않으면 브라우저가 지정하는 이름이 표시된다.(브라우저마다 이름이 다름)

type=”reset”

속성값 reset은 초기화 버튼이 만들어진다. 초기화는 폼에 입력된 값을 초기값으로 되돌린다.

type=”button”

속성값 button은 푸시 버튼이 만들어진다.
다양한 용도로 사용된다. 기본 기능은 없으며 기능 실행을 위해서는 자바스크립트와 같은 클라이언트 사이드 스크립트가 필요하다.
value 속성으로 입력된 텍스트는 버튼 이름이며 이 이름은 실제 버튼 위에 나타난다.

type=”button”

<label for="user_pass">비밀번호 : </label>
<input
  type="password"
  name="user_pass"
  id="user_pass"
  required
  placeholder="비밀번호 6자리를 입력해주세요."
/>

속성값 password로 지정하면 패스워드 필드가 만들어진다.
화면 상에서 읽히지 않도록 별이나 원모양의 기호로 표시된다.

type=”file”

<input type="file" name="" id="" />

속성값을 file로 지정하면 파일 업로드 컨트롤이 만들어진다.
파일 업로드 컨트롤은 로컬 컴퓨터에 있는 파일을 선택하기 위한 컨트롤이며 파일명이 입력되는 텍스트 필드와 파일 탐색기를 호출하기 위한 버튼으로 구성된다.
accept 속성을 사용하면 브라우저가 지정된 파일형식만 찾을 수 있도록 파일 업로드 컨트롤을 구성할 수도 있다.
파일을 전송하고자 할 때는 form 요소에 인코딩 타입을 enctype="multipart-formdata"로 정의하여 사용해야 하고 method방식은 POST로 사용한다.

type=”checkbox”

<input type="checkbox" name="nation" value="korea" checked="checked" />한국
<input type="checkbox" name="nation" value="japan" />일본
<label>
  <input
    type="checkbox"
    name="nation"
    value="korea"
    checked="checked"
  />동의하시겠습니까?</label
>

속성값을 checkbox로 지정하면 체크박스가 만들어진다. 0 체크박스는 선택 여부를 확인하기 위한 입력 컨트롤이며 입력 상태는 선택과 미선택으로 구분된다.
체크박스는 중복선택을 위한 컨트롤이므로 여러 개의 체크박스로 구성할 수 있다.
이때 서로 관련있는 체크박스라는 사실을 브라우저에 알려주기 위해서는 name 속성이 필요하다.
checkd 속성을 이용하면 선택된 상태가 된다.

type=”radio”

<input type="radio" name="rdo" id="" /> 고양이
<input type="radio" name="rdo" id="" /> 강아지
<label><input type="radio" name="gender" id="" checked /> 남자</label>
<label><input type="radio" name="gender" id="" /> 여자</label>

라디오 버튼이 만들어진다.(유래 : 자동차의 라디오)
라디오 버튼은 체크박스와 마찬가지로 선택 여부를 확인하기 위한 컨트롤이다. 다만 중복 선택을 지원하지 않는 단일 선택만 이루어진다.
여러 항목중에 한 가지 항목을 선택할 때 사용하는데 이를 위해서는 항목들이 서로 배타적이어야 한다.

list & datalist

list 속성과 datalist 요소를 사용하면 option의 값을 연결해서 사용할 수 있다.

<label
  >이동할 웹주소 <input type="url" list="url_ex" name="user_url" id="user_url"
/></label>
<datalist id="url_ex">
  <option value="http://naver.com">네이버</option>
  <option value="http://daum.net">다음</option>
</datalist>

데이터 목록 요소 컨테이너 컨트롤
내부에 <option></option>요소를 사용해 항목을 만든다.

type=”tel”

<label>전화번호 <input type="tel" name="user_tel" id="user_tel" /></label>
<datalist id="user_tel">
  <option value="111">111</option>
  <option value="112">112</option>
  <option value="114">114</option>
  <option value="119">119</option>
</datalist>

select element

<label for="user_hobby">취미</label>
<select name="user_hobby" id="user_hobby" required>
  <option value="0">없음</option>
  <option value="1" selected>축구</option>
  <option value="2" label="basketball" disabled>농구</option>
  <option value="3">독서</option>
  <option value="3">영화관람</option>
</select>

select는 드롭다운 메뉴라고 불리고 여러 항목 중에서 택일할 때 사용한다.
select와 option은 함께 사용한다.
select는 선택 컨트롤을 option요소는 옵션 항목을 표시한다.
보통 공간에 대한 제약이 많은 경우에 사용하는 편이며 기획단에서 판단하여 설계한다.
name : 서버에 전송할 때 필요한 값
multiple : 여러 개의 선택이 가능한 속성
disabled : 비활성화
required : 필수입력
size : 화면에 보여질 옵션 갯수 설정

내가 처음 개발 회사에 입사를 했을 때 뭐든 기초가 중요하다고 했던 팀장님의 말씀이 최근 들어 무슨 말인지 잘 알 것 같다.