# form, input, label

## \<form>

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

### 예시

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

### form을 이용한 일반적인 구조

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

### 참고&#x20;

* [HTML *폼* 구성 *방법*](https://developer.mozilla.org/ko/docs/Learn/HTML/Forms)&#x20;

### method 속성 (get/post)

#### GET

* 기본값, 폼에 입력한 사용자의 정보가 url에 그대로 나타남
* 전송할 수 있는 정보의 길이가 제한되어 있다.
* [퍼머링크(permalink)](https://ko.wikipedia.org/wiki/%ED%8D%BC%EB%A8%B8%EB%A7%81%ED%81%AC)로 사용될 수 있다.
* 북마크 같은 용도로 사용하거나 어떤 정보를 가져올 때 정보에 대한 url로 많이 사용한다.&#x20;

#### POST

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

## \<input>

* 사용자의 데이터를 입력 받을 수 있는 폼 컨트롤을 말함.

  다양한 유형(Type) 설정이 가능하며, 유형에 맞는 역할을 수행한다.
* 닫는 태그가 없음.

### 속성

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

{% hint style="info" %}
name 속성&#x20;

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

{% hint style="info" %}
readonly와 disabled 속성의 차이&#x20;

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

### 유형

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

### 예시

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

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

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

### for / id 속성&#x20;

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

### 예시

```markup
<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 유형&#x20;

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

## radio 유형&#x20;

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

{% hint style="warning" %}
주의! \
`name`값이 반드시 **같아야** 한다.  같지 않을 경우 값이 다른 것과 중복 선택이 가능해진다.
{% endhint %}

![radio 유형 → name값이 같지 않을 경우 중복 선택이 가능하다.](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRP1IlG9HOrSKEagh6s%2F-MRP1eoHIs63q6vKjAct%2Fimage.png?alt=media\&token=c55acfa7-4282-4a84-b28b-e15a89020638)

### 예시&#x20;

```markup
<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 유형&#x20;

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

{% hint style="warning" %}
enctype 속성은 method가 POST일 경우에 사용 가능하다.&#x20;
{% endhint %}

```markup
<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 유형&#x20;

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

![submit, button 둘 다 브라우저에 보이는 모양은 같다.](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRP4nFFnxzubLRISb_p%2F-MRP5hV5S5mKlvwDx9iu%2Fimage.png?alt=media\&token=2dfe448e-8994-462e-a35d-3d6ff5923e51)

```markup
<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의 유형 한 눈에 보기&#x20;

[MDN의 \<input> 참고하기](https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input)

![](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPEDwQcP9aLAKahszO%2F-MRPEmYFTHm6jeNxdw9H%2Fimage.png?alt=media\&token=d31875ca-66f7-4aaa-8f13-2432ec409db5)

## 참고&#x20;

* \<form> [폼 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/form) → MDN
* \<input> [인풋 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/input) → MDN
* \<label> [레이블 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/label) → MDN
* [Forms](https://www.w3.org/TR/html/sec-forms.html#sec-forms) → HTML 5.2 표준 기술 사양
* [Formspree](https://formspree.io/) → 폼 전송 테스트 사이트

{% file src="<https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MRPmKMUAMWzsb0oxsSm%2F-MRPmb5oSygiD0R4Wfo_%2Fform-elements.zip?alt=media&token=85f7e2a7-f62f-4a1f-86c4-0d1afbeaa3f2>" %}
