form, input, label

<form>

폼은 텍스트필드, 버튼, 체크박스와 같은 폼 컨트롤을 포함하는 웹 페이지의 컴포넌트를 말함.
- 사용자와 인터랙션을 수행한 결과(예: 검색)를 서버로 보낼 수 있다.
- 즉, 사용자가 폼에 입력한 정보를 입력하고 폼 컨트롤을 클릭 했을 때, 실행되는 브라우저에 입력한 정보를 전송하는 것이다.
라벨과 위젯을 둘러싸는데 최고의 방법은 요소 나 요소를 사용하는 것이다.
게다가 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.

예시

<body>
  <form action="https://formspree.io/your@email.com" method="POST">
    <div>
      <input type="text" />
    </div>
  </form>
</body>

form을 이용한 일반적인 구조

폼 안에 라벨과 위젯을 그룹화 해줄때는 <p>요소 또는 <div>요소를 사용해준다.
<fieldset>요소에 <legend>를 사용해서 폼의 타이틀을 만들어 주는 것이 일반적인 관행이다.
목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.

참고

HTML 폼 구성 방법

method 속성 (get/post)

GET

기본값, 폼에 입력한 사용자의 정보가 url에 그대로 나타남
전송할 수 있는 정보의 길이가 제한되어 있다.
퍼머링크(permalink)로 사용될 수 있다.
북마크 같은 용도로 사용하거나 어떤 정보를 가져올 때 정보에 대한 url로 많이 사용한다.

POST

폼에 입력한 사용자의 정보가 숨겨짐 (URL 상에 전달한 정보가 표시되지 않는다.)
민감한 정보 데이터를 전송할 때 사용 (사용자의 로그인 정보 등)
header의 body에 담겨서 전송된다.
GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다)
전송할 수 있는 데이터의 길이 제한이 없다.
퍼머링크로 사용할 수 없다.
서버 쪽에 어떤 작업을 명령할 때 사용한다. (데이터의 기록, 삭제, 수정 등)

<input>

사용자의 데이터를 입력 받을 수 있는 폼 컨트롤을 말함.
다양한 유형(Type) 설정이 가능하며, 유형에 맞는 역할을 수행한다.
닫는 태그가 없음.

속성

name : 서버의에 값을 전달 할 때 이름
placeholder : 사용자에게 무엇을 입력해야 할지 도움을 준다.
value : 사용자가 입력하기 전에 미리 입력되어있는 텍스트
readonly : 읽기만 가능 사용자가 입력할 수 없음(value 값 설정 가능)
- 속성이 설정된 요소의 값을 사용자가 편집할 수 없지만, 전송 버튼을 클릭하면 value 값이 서버 전송된다.
required : 필수 입력사항, 입력하지 않을 시에 전송 불가
disabled : 비활성화 (접근, 작업이 불가능 하다. )
minlength : 최소 입력 글자 수 설정
maxlength : 최대 입력 글자 수 설정
list

name 속성

input 요소의 name 속성이 필요한 경우는 서버에 폼 데이터를 전송해야 할 때 필요합니다. 서버 개발자와 협의하여 name 값을 설정하면 되며, 서버와 통신하지 않는 경우(실습 등)에는 name 값이 필수로 필요하지 않다.

readonly와 disabled 속성의 차이

두 속성의 공통점은 사용자가 편집할 수 없다는 것이다. 하지만 전송 버튼 클릭 시 readonly는 value 값이 서버에 전송 되지만 disabled 값은 전송 되지 않는다.

유형

text : 텍스트를 입력할 수 있는 사각형 박스 생성
password : 텍스트 입력 시에 ...과 같은 형태로 입력됨
checkbox
radio
file : 파일을 전송할 때 사용 (form 요소에 'enctype="multipart-formdata"와 method 방식은 POST로 반드시 입력해야 함)
submit : 클릭시에 페이지가 바뀜
button : 클릭시 아무일도 일어나지 않음(javascript와 함께 사용)
image
reset
hidden : 사용자에게 보여지지 않으며 데이터를 전송할 때 사용
search
url
tel
email
date
month
week
time
datetime-local
number
range
color

예시

<input type="text">
<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">

<label>

컨트롤에 레이블(이름)을 붙이고자 할 경우 사용.

<body>
  <form action="https://formspree.io/your@email.com" method="POST">
    <label>이름 <input type="text" placeholder="이두연"></label>
  </form>
</body>

for / id 속성

for/ id 속성을 사용하면 <input>을 <lable> 태그 밖으로 꺼낼 수 있다. 단, for 속성의 이름과 id 속성의 이름이 반드시 동일해야 한다.

예시

<body>
  <form action="https://formspree.io/your@email.com" method="POST">
    <label for="u_pass">비밀번호</label>
    <input id="u_pass" name="u_pass" type="password" 
    maxlength="8" plaaceholder="비밀번호 8자리를 입력해주세요">
  </form>
</body>

checkbox 유형

여러 선택지 중에 중복해서 선택할 때 사용

radio 유형

여러 선택지 중에 한 개를 선택할 때 사용
주의) name값이 반드시 같아야 한다. 같지 않을 경우 값이 다른 것과 중복 선택이 가능해진다.
'checked' 입력시 브라우저를 열었을 때 자동으로 해당 선택지가 선택되어 있음

주의! name값이 반드시 같아야 한다. 같지 않을 경우 값이 다른 것과 중복 선택이 가능해진다.

예시

<body>
  <!-- checkbox -->
  <p>
    <label
      ><input type="checkbox" name="number" velue="one" checked />1</label
    >
    <label
      ><input type="checkbox" name="number" velue="two" checked />2</label
    >
    <label><input type="checkbox" name="number" velue="three" />3</label>
  </p>

  <!-- radio -->
  <p>
    <label><input type="radio" name="color" value="red" />빨강</label>
    <label
      ><input type="radio" name="color" value="black" checked />검정</label
    >
    <label><input type="radio" name="color" value="blue" />파랑</label>
  </p>
</body>

file 유형

file 유형을 사용할 때는 반드시 form요소에 enctype 속성을 사용해야한다.

enctype 속성은 method가 POST일 경우에 사용 가능하다.

<form action="https://formspree.io/your@email.com" method="POST" 
      enctype="multipart-formdata">

<input type="file"
       name="user-data-upload" id="user-agree" />

button/submit 유형

두 유형 모두 브라우저에 보여지는 모양이 같다.

<input type="submit" value="전송, submit">
<input type="button" value="버튼, button">

<!-- 또는 image 유형을 사용해도 같은 기능을 구현할 수 있다. -->
<input type="image" src="https://goo.gl/Ng66oQ" alt="체크인" width="20" height="20">

<!-- 또는 button을 사용해도 같은 기능을 구현할 수 있다. -->
<button type="submit">전송</button>
<button type="button">전송</button>

input의 유형 한 눈에 보기

MDN의 <input> 참고하기

참고

<form> 폼 요소 → MDN
<input> 인풋 요소 → MDN
<label> 레이블 요소 → MDN
Forms → HTML 5.2 표준 기술 사양
Formspree → 폼 전송 테스트 사이트

7KB

form-elements.zip