HTML - Form

쑤·2024년 1월 20일

CSS form html

HTML/CSS

목록 보기

3/8

HTML Form

1. form 기초, input

1-1. 폼(form)이란?

웹 상에서 사용자의 입력을 받아서, 클라이언트에서 서버로 정보를 제출하기 위한 요소(Element)
<form> 태그 사용
주요 속성(Attribute)
- ⭐️ action : 폼 데이터를 보낼 URI 지정
  - submit, button 등을 통해 사용자가 데이터를 제출하는 이벤트가 발생했을 때, 입력받은 데이터를 어디로 보낼지 지정
  - 참고) URI란? Uniform Resource Identifier. 리소스의 위치를 식별하기 위한 문자열.(cf- URL은 URI의 하위 개념)
  - 다른 웹 페이지 주소, 서버의 주소, 프로젝트 내 다른 HTML 파일 등
- method : GET, POST 등 양식을 제출할 때 사용할 HTTP 메소드
  - GET : action에 명시한 URI에 Query Parameter(?뒤로 오는 값)형태로 이어 붙여서 전송(Default, 기본값)
    - 예) http://my-server-host.com?fieldName1=value&fieldName2=value....
    - 그대로 드러나기 때문에 보안에 취약함
- POST : Request Body에 데이터를 넣어서 전송
  - 백엔드 개발자와 협의 필요하나, 보통 실무에서는 POST로 보내는 경우가 많음
id : form의 식별자

1-2. input 태그

<form> 태그는 입력 받을 부분 전체를 감싸는 껍데기 같은 느낌
- form 태그 하위에 <input>, <select>, <textarea> 태그를 작성하여 실제 입력을 받음
- <input> 태그는 가장 대표적인 form 요소
주요속성

<input type="text"> (default)
<input type="email">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="button">
<input type="submit">
<input type="date">
<input type="file">
<input type="number">
<input type="color">
주요속성
- type : type 속성의 값에 따라 input type이 정해지며, 여러가지 종류의 입력을 받을 수 있다.
- name : 데이터를 제출하기 위한 이름 지정
- value : input의 값 지정. 초기값이 있을 때 등 사용(참고-추후 React, Vue에서는 state 값 등 변수처럼 지정 가능)
- placeholder : 값이 입력되기 전 사용자에게 힌트 제공
- Required: 사용자가 반드시 입력해야 하는 구간을 입력하지 않았을 시 너 입력해야돼!라고 경고메시지를 보여주는 것
- disabled: 비활성화 기능
- checked: 선택된 상태로 속성 지정
input은 인라인 요소이다 (cf. <br> 태그)
- input을 여러개를 작성하면 줄바꿈을 하고 싶을 때, 간단하게 줄바꿈 가능
- div 태그로 감싸서 구분 가능

2. input - text, email, password 그리고 textarea

text (default)
email
- text와 보이는 모습은 동일하나, 이메일을 입력받기 용이하게 되어있음 (예 - 키보드 표시, 유효성 검증 등)
password
- text와 유사하나, 값이 마스킹되어 표시

input

<input type="eamil" name="useremail" placeholder="Email을 입력하세요" required>
<input type="password" name="password" placeholder="비밀번호를 입력하세요" required>
<input type="submit" value="로그인">

output

<textarea> : 여러줄의 text를 입력받을 수 있는 태그
- 예) 댓글, 리뷰 등
- 주요 속성
  - cols, rows : 크기 지정
  - name: 폼 데이터 제출시 어떤 이름으로 보여질지 지정

3. Button

버튼을 만들 수 있는 태그는 크게 두가지

<input type=”button” value=”Click me!”>

<button>Click me!</button>

Click me!

둘의 차이점? input은 일반 텍스트만 표현 가능, button은 어떤 요소든 하위에 포함 가능
button 태그의 장점은 CSS로 버튼을 다양하게 스타일링하여 활용할 수 있다는 것

<button> 태그의 주요 속성(attribute)

type
- submit(default) : 서버로 form 데이터를 제출
- reset : 모든 폼을 기본 값으로 바꾼다.
- button : 순수하게 클릭 이벤트를 받으며, 별도로 함수를 연결시켜주지 않으면 아무것도 하지 않음
  - Javascript(React, Vue)를 통해 이벤트를 연결시켜서 유용하게 사용할 수 있다.
- name : 데이터를 제출하기 위한 이름 지정
- value : 초기값
- disabled : 비활성화된 버튼

4. Label

<input>은 항상 <label>과 함께 쓰는 것이 좋다.
label은 해당 Input이 어떤 입력인지 설명해주는 역할을 한다.
- 접근성을 위해서도 좋다.
- checkbox나 radio 타입에서는 (거의) 필수이다.
사용법 : input의 id 속성 값 - label의 for 속성 값을 매핑시킨다.

<label for="name">이름:</label>
<input type="text" id="name" />

또 다른 방법

<label>Click me <input type="text"></label>

참고) label 안에 컨텐츠를 나타내는 텍스트 외에 다른 요소를 넣는것은 권장하지 않음 (예 - h1~6, p, a 등)

5. CheckBox

checkbox란? 특정 값을 각각 선택하거나 선택 해제할 수 있는 네모 모양의 박스
- 하나의 선택지 예) (선택) 개인정보 제공 동의
- 여러개의 선택지 예) (선택) 성별 정보 제공 동의, (선택) 생일 정보 제공 동의

<input type=”checkbox”>

속성(Attribute)
- name : form 제출 시 표시되는 이름. 전달할 값의 이름.
- value : 전달할 값. 체크박스의 값을 나타내는 문자열
  - 사용자에게 노출되지 않으나, form 데이터를 받은 곳(action에 명시한 곳 or 이벤트 핸들링 함수)에서 데이터를 받아서 처리할 때 name과 함께 사용
  - checkbox에서는 value가 명시되지 않으면, default value는 “on”으로 전송된다
- id : label의 for 속성과 연결
- checked (boolean 속성) : default로 체크되어있는지 여부.
  (해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.)
참고) 서버에 제출되는 형태 예시
- name이 같은 입력이 있는 경우 : [주소]?location=in&menu=steak&menu=pasta&stars=great
  (같은 입력이 값만 다르게 나타남)
- name이 모두 다른 경우 : [주소]?location=in&eatSteak=true&eatPasta=true&stars=great
  (일반적인 경우)

6. Radio

그룹 내 다수의 선택지 중 하나의 선택을 입력 받고자 할 때 사용

<input type=”radio”>

체크박스(checkbox)와의 차이점?
- 체크박스는 여러개 선택을 허용할 때
- 라디오 버튼은 여러 값에서 단 하나만 선택할 때 사용
속성(Attribute) 작성 방법
- name : form 제출 시 표시되는 이름. 전달할 값의 이름. 한 그룹은 반드시 같은 name으로 지정해줘야 함
  - name을 다르게 주면, 별도의 그룹으로 인식된다.
  - 자주하는 실수! 하나만 선택되어야 하는 상황에서 여러개가 선택되는 버그(오동작)이 발생할 수 있음 주의
- value : 전달할 값. 선택된 값을 나타내는 문자열 (name=value형태로 제출)
  - 사용자에게 노출되지 않으나, form 데이터를 받은 곳(action에 명시한 곳 or 이벤트 핸들링 함수)에서 데이터를 받아서 처리할 때 name과 함께 사용
  - 한 그룹(동일 name) 내에서 unique한(즉, 서로 다른) value를 가져야 함
  - radio에서 value가 명시되지 않으면, default value는 “on”으로 전송된다 (유의미한 radio가 되기 위해 반드시 value를 적어줘야 함)
- id : label의 for 속성과 연결
- checked : default로 체크되어있는지 여부

7. Select Box

드롭 다운 리스트를 생성하여 사용자가 하나를 선택할 수 있도록 함

작성 방법

1) <select> 태그로 감싼다

name(필수) : 전달할 값의 이름
id : label의 for 속성과 연결
form : form의 id 속성과 연결 ( $\lt$ select $\gt$ 가 $\lt$ form $\gt$ 하위에 속하지 않을 때를 위해)

2) 그 하위에 <option> 으로 선택지를 하나씩 추가한다.

(실제로 선택지가 어떻게 보일지는 option의 여는태그와 닫는태그 사이에 컨텐츠 값을 적는거에 달렸음)

value : 해당 선택지의 값을 나타내는 문자열. 전달할 값
selected : 해당 option이 초기에 선택되어 있도록 지정

쑤

프론트엔드로 남들보다 앞서갑니다

이전 포스트

HTML - 핵심태그

다음 포스트