다양한 Form

박종호·2024년 1월 5일

form frontend html

FrontEnd

목록 보기

3/17

🔴 form

사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
🙋 꼭 form 태그로 묶어 주어야 하나요? 🙅‍♀️ form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그입니다. 별도 제출할 필요가 없다면 form 태그를 사용하지 않으셔도 됩니다. - ex) 단순히 입력받은 값을 화면에 뿌려주는 용도일 경우 ```html 이름 입력받기 이름 입력
이름:
```

`method` 속성

양식을 제출할 때 사용할 HTTP 메서드

Post

양식 데이터를 요청(Request) 본문으로 전송
브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음.
POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송
데이터의 길이제한이 없고, GET 방식보다 보안성이 높음.
**enctype** 속성
- method 특성이 post인 경우 enctype은 양식 제출 시 데이터의 MIME 타입을 나타냅니다. 💡 **MIME 타입** - 클라이언트에 전송된 문서의 다양성을 알려주기 위한 메커니즘. - 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지 결정하기 위해 사용
- **application/x-www-form-urlencoded**: 기본값
- **multipart/form-data**: <input **type="file"**>이 존재하는 경우 사용
```
<form 
	action="http://localhost:8000/" 
	method="post" 
	**enctype="multipart/form-data"**
>
  <input type="text" name="myTextField">
  <input type="checkbox" name="myCheckBox">Check</input>
  **<input type="file" name="myFile">**
  <button>Send the file</button>
</form>
```
  post방식은 비유하자면 포스트잇으로 정보를 딱 전달하고 온다 정도로 생각해보면 어떨까?
Get

<form **method="get"** action="http://naver.com">
  <div>
    <label for="user-name">이름</label>
    <input id="user-name" type="text" name="name">
  </div>
  <div>
    <label for="user-age">나이</label>
    <input id="user-age" type="number" name="age">
  </div>
  <button type="submit">버튼</button>
</form>

get 방식은 쉽게 설명하면 정보를 목소리로 외쳐서 표현한다고 비유해보자!
"야~ 데이터 보낸다~!" 처럼? 암호화하지않고 데이터를 그냥 요청하는거지.

https://example.com**?name=홍길동&age=20**
양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장
보통 쿼리 문자열에 포함되어 전송되므로 길이의 제한이 있음(URL 길이제한은 브라우저마다 다름)
보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청

name/value

이름/값(name/value)의 짝으로 양식과 함께 전송됩니다

	POST	GET
전송	양식 데이터를 요청 본문으로 전송	https://example.com?name=홍길동&age=20
캐시	X	O
길이제한	X	O
보안	GET 방식보다 높음	취약

`action` 속성

작성된 양식 데이터를 처리할 프로그램의 URL를 적어줍니다.
이 속성을 지정하지 않으면 데이터는 form이 있는 페이지의 URL로 보내집니다. = 서버의 위치를 설정할 수 있다!

`autocomplete` 속성

입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄.
이전에 해당 양식의 입력된 값이 있을 경우(브라우저에 기록이 남아있을 경우 나타남)

- off 자동입력 X

- on 자동입력 O(기본값)

🟠 label

이름표라고 생각하자!
사용자 인터페이스의 항목을 나타냅니다.
input과 함께 사용해주세요!
- 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 합니다.
- label을 클릭하여 input에 포커스를 이동시키거나 활성화 시킬 수 있습니다.

for-id를 이용해 연결하기

<label **for="user-id"**>아이디</label>
<input **id="user-id"** type="text">

label 안에 input 중첩하여 연결하기

<label>
	아이디
	<input type="text">
</label>

💡 label 안에 제목요소를 배치 하지 말 것! - form에 제목이 필요한 경우 `fieldset` `legend` 사용하기 💡 `type="button"`선언과 유효한 `value` 속성을 가진 input 요소에는 레이블이 필요하지 않습니다.

<input type="button" value="button">
<button type="button">button</button>

🟡 button

사용자가 클릭할수 있는 요소입니다.
form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있습니다.

button의 타입

**button**: 기본 행동이 없습니다. 클릭했을 때 아무것도 하지 않습니다. JavaScript와 연결하여 사용합니다
- 양식 제출용이 아니라면 타입을 꼭 button으로 지정해주세요!
**submit**: 서버로 양식 데이터를 제출합니다.
**reset**: 초깃값으로 되돌립니다.

`<a>` vs `<button>` 두개는 어떤 차이가 있을까요?

a vs button a의 경우
1. 오른쪽 마우스 버튼을 클릭하면, 링크를 새 탭에서 열거나, 링크를 저장하는 등의 추가 옵션이 있는 컨텍스트 메뉴가 표시됩니다.
2. shift + click, cmd + click 와 같은 사용시 특수한 기능을 합니다.
3. 마우스오버, 포커스가 되었을 때 이동할 url 주소를 브라우저 창 하단에 노출합니다.
  
  a button
  역할 하이퍼링크 사용자의 동작 실행을 위한 트리거
  기능 다른 페이지 혹은 페이지 내의 특정 영역으로 이동 브라우저 기본동작 없음.
  
  JS를 이용하여 동작 추가
  (submit: form 전송 / reset: form 초기화) |
  | 키보드 | 엔터 | 스페이스, 엔터 |
  | 주의 | href 값 없이 JS로 동작하게 하면 안됨! | JS로 동작 |

	a	button
역할	하이퍼링크	사용자의 동작 실행을 위한 트리거
기능	다른 페이지 혹은 페이지 내의 특정 영역으로 이동	브라우저 기본동작 없음.

🟢 input

공통 속성

type	input 양식 컨트롤의 유형 (button, text, email, file…)
name	input 양식 컨트롤의 이름
value	input 양식 컨트롤의 값
autocomplete	on/off 양식 자동완성 기능에 대한 힌트(check, radio 제외)
placeholder	양식 컨트롤이 비어있을 때 나타나는 내용
- 입력에 대한 힌트 제공 ex) 숫자, 문자 조합의 6자 이상
required	양식 전송을 위해 필수로 입력해야하는 값
disabled	비활성화
readonly	수정불가(읽기전용)

💡 `readonly` vs `disabled` ****readonly: 사용자가 입력할 수 없으나 value가 있다면 값을 넘길수 있음 disabled: 사용자가 입력할 수 없고 기존 value가 있어도 넘길 수 없음

<중요> input 유형

button	버튼. 기본행동 없음. value로 버튼 텍스트 표시
submit	양식 전송
reset	form 내용을 기본값으로 초기화
text	텍스트 입력
password	비밀번호 입력(값이 가려짐)
email	이메일 입력
search	검색 문자열 입력(삭제 아이콘 포함)
tel	전화번호 입력
url	웹페이지 주소 입력
number	숫자 입력
checkbox	단일 값을 선택하거나 선택 해제
radio	선택 항목중 하나만 선택
file	파일 업로드
date	날짜 입력(년,월,일) - 시간 없음
datetime-local	날짜와 시간을 지정
month	연과 월 입력
time	시간 입력
color	색 선택
range	슬라이드 바 형태
hidden	보이지 않지만 값은 서버로 전송하는 컨트롤

🤔 **Q. 그냥 email, tel, url, number 같은 경우 text로 값을 받아도 되지 않나요?**

type을 통해 어떤 데이터를 받는지 예측할 수 있습니다. 코드의 가독성이 좋아집니다.
모바일에서 type에 따른 키패드 UI가 조금씩 다릅니다! 적절한 input type은 사용자의 경험을 개선시킬 수도 있습니다.

모바일에서 키패드

참고!
그렇다면 현직에서는 버튼을 만들 때, button은 input을 자주 쓸까 button을 자주쓸까? 정답은 button태그를 더 많이 쓴다.
이유는? 닫힘태그가 button은 존재하기때문에 더 많은 커스터마이징에 용이하다. 또한 가상태그를 쓰는데에 버튼태그가 더욱 용이하다

button, reset, submit

<**button** type=”___”> 태그와 동일한 기능을 수행합니다.

버튼
초기화
전송

text / password / url / search / tel

**maxlength**: 문자수 최대 길이
**minlength**: 문자수 최소 길이

checkbox / radio

**checkbox**: 단일 값을 선택하거나 선택 해제할 수 있는 체크박스

<fieldset>
	<legend>사용 기술</legend>

	<input **type="checkbox"** name="html" ****id="html">
	<label for="html">HTML</label>
	      
	<input **type="checkbox"** name="css" id="css">
	<label for="css">CSS</label>
	
	<input **type="checkbox"** name="js" id="js">
	<label for="js">JavaScript</label>
	
	<input **type="checkbox"** name="python" id="python">
	<label for="python">Python</label>
	
	<input **type="checkbox"** name="django" id="django">
	<label for="django">Django</label>
</fieldset>

**raido**: 같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택

<fieldset>
  <legend>성별</legend>
  <input **type="radio"** **name="gender"** value="male" id="male">
	<label for="male">남성</label>

  <input **type="radio"** **name="gender"** value="females" id="female">
	<label for="female">여성</label>
  
	<input **type="radio"** **name="gender"** value="no" id="no">
	<label for="no">선택 안함</label>
</fieldset>

**checked**: 체크 여부

file

파일을 지정할 수 있습니다.
**accept**: 허용하는 파일 유형을 지정할 수 있습니다.
**multiple**: 지정할 경우 사용자가 여러개의 파일을 선택할 수 있습니다.

<label for="profile">프로필 이미지</label>
<input 
	type="file"
	id="profile"
	name="profile"
  **accept="image/png, image/jpeg"**
>
```## number

- 숫자 입력. 화살표 컨트롤 제공
- `max`: 최대값
- `min`: 최소값
- `step`: 증가값

```html
<label for="num">숫자입력 (10-100):</label>
<input type="number" id="num" name="number"
       min="10" max="100" step="10">

select

옵션 메뉴를 제공합니다.
multiple : 여러개의 항목을 동시에 선택할 수 있습니다.
size : 한번에 노출되는 항목의 수를 조절합니다.
required : 선택 필수
disabled : 선택 불가

option

메뉴의 각 옵션을 정의합니다.
모든 option 은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요합니다.
- 지정하지 않은 경우, option 내 텍스트 값으로 사용합니다.
selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.

optgroup

option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있습니다.

<label for="animals">동물을 선택하세요: </label>
<select id="animals">
  <optgroup label="포유류">
    <option>원숭이</option>
    <option>개</option>
    <option>고양이</option>
  </optgroup>
  <optgroup label="파충류">
    <option>도마뱀</option>
    <option>뱀</option>
  </optgroup>
</select>

fieldset

form 관련 요소들을 묶을 때 사용합니다.
disabled 를 사용할 경우 모든 자손 컨트롤을 비활성화합니다.

legend

그룹의 제목을 제공합니다.

textarea

여러줄의 text를 입력받을 수 있습니다.

textarea 속성

cols: 입력창의 너비. 문자의 평균적인 넓이를 기준으로 합니다.(기본값 20)
rows: 기본적으로 보여줄 입력 줄 수 를 의미합니다.
maxlength: 사용자가 입력할 수 있는 문자 최대 길이입니다.
minlength: 사용자가 입력해야 할 문자 최소 길이입니다.
placeholder: 컨트롤에 무엇을 입력해야하는지 알려주는 힌트

<textarea
	rows="10" 
	cols="50" 
	minlength="10"
	maxlength="100" 
	placeholder="10자 이상 100자 이하로 내용을 입력해주세요"></textarea>

textarea 크기 비활성화 CSS
```
textarea{
	resize:none;
}
```

박종호

Hey🖐️

이전 포스트

다양한 Tag

다음 포스트

다양한 Form

FrontEnd

🔴 form

`method` 속성

Post

Get

name/value

`action` 속성

`autocomplete` 속성

🟠 label

for-id를 이용해 연결하기

label 안에 input 중첩하여 연결하기

🟡 button

button의 타입

`<a>` vs `<button>` 두개는 어떤 차이가 있을까요?

🟢 input

공통 속성

<중요> input 유형

모바일에서 키패드

button, reset, submit

text / password / url / search / tel

checkbox / radio

file

select

option

optgroup

fieldset

legend

textarea

textarea 속성

다양한 Tag

HTML 연습1

0개의 댓글

관련 채용 정보

다양한 Form

FrontEnd

🔴 form

method 속성

Post

Get

name/value

action 속성

autocomplete 속성

🟠 label

for-id를 이용해 연결하기

label 안에 input 중첩하여 연결하기

🟡 button

button의 타입

<a> vs <button> 두개는 어떤 차이가 있을까요?

🟢 input

공통 속성

<중요> input 유형

모바일에서 키패드

button, reset, submit

text / password / url / search / tel

checkbox / radio

file

select

option

optgroup

fieldset

legend

textarea

textarea 속성

다양한 Tag

HTML 연습1

0개의 댓글

관련 채용 정보

`method` 속성

`action` 속성

`autocomplete` 속성

`<a>` vs `<button>` 두개는 어떤 차이가 있을까요?