4.1 HTML Form
- HTML 폼: 사용자로부터 데이터 입력받기 위해 사용
- 웹 페이지에서 사용자로부터 데이터를 입력받기 위해 사용되는 HTML 요소들의 집합
4.2 HTML Input Types
- <input type="button">
- 웹에서 보게 되는 검색, 로그인, 저장 등 버튼 표현하기 위해 사용됨
- <input type="checkbox">
- 여러 개의 선택 항목 중에 하나 이상 선택할 수 있는 기능 구현 위해 사용됨
- <input type="color">
- 색상 팔레트 선택
- <input type="date">
- 달력, 날짜 선택
- <input type="datetime-local">
- 날짜와 시간을 현지 시각으로 선택
- <input type="email">
- 이메일 주소 입력 받기 위해 사용됨
- form 태그 안에 작성하면, submit 할 때 email 형식 자동 체크
- <input type="file">
- 파일 첨부
- multiple 속성 지정하면 여러 개의 파일 선택 가능
- <input type="hidden">
- 사용자 눈에 보이지 않고 개발자가 숨겨진 데이터 관리하고 싶을 때 사용
- 사용자에 의해 직접 등록되는 데이터가 아니고,
시스템적으로 필요한 데이터 등록, 프로그래밍 코드에서 사용하게 되는 경우 많음
- <input type="image">
- <img> 태그와는 다르게 input:image는 자체의 버튼 기능 가지고 있음
- 사용자로부터 클릭 이벤트 받을 수 있고, 이벤트 발생 시 특정 기능 수행 가능
- <input type="month">
- 월 선택
- <input type="number">
- 숫자 값 입력 받는 용도
- 숫자 제외한 일반 문자는 입력 안됨
- 입력 받을 수 있는 최소값과 최대값 지정 가능
- <input type="password">
- 비밀번호 입력 받는 용도
- <input type="radio">
- 여러 선택 항목 중 하나만 선택
- <input type="range">
- 볼륨 조절처럼 정해져 있는 범위 내의 숫자 값을 볼륨 바 형태로 선택
- <input type="reset">
- <form> 태그 안에 있는 폼 요소들에 대해 사용자가 입력한 값 초기화
- <input type="search">
- 검색 키워드 입력 받는 용도
- 우측에 x 표시로 입력 취소 가능
- <input type="submit">
- <form> 태그 안에 있는 폼 요소의 데이터를 서버/웹 페이지로 전달
- <input type="tel">
- 전화번호 입력 받기 위한 폼 요소
- pattern 속성 사용하면 입력 받을 전화번호의 형식 지정 가능
- 정규표현식 사용
- <input type="text">
- 사용자로부터 데이터 입력 받을 때 가장 많이 사용되는 폼 요소
- 모든 형태의 문자 입력 받기 가능
- <input type="time">
- 사용자로부터 시간을 입력 받을 때 사용
- <input type="url">
- 웹 사이트의 주소를 입력 받을 때 사용하는 폼 요소
- <input type="week">
- 사용자로부터 몇 번째 주에 해당하는 주인지 입력 받기 가능
4.3 Input type 속성
- value 속성
- 사용자로부터 값 입력 받기 전에 초기 값 정의
- readonly 속성
- 해당 입력 요소는 초기 설정 값 수정 불가 (읽는 용도로만 사용)
- disabled 속성
- 입력 요소 사용 불가
- readonly vs. disabled
- readonly 속성은 사용자가 입력된 값을 수정만 못할 뿐 폼을 submit하면 입력된 값 전송 가능
- disabled 속성은 폼을 submit 해도 전송 안되는 차이 존재
- maxlength 속성
- 입력 받을 값의 최대 길이 지정
- ex. 사용자 ID 길이 제한
- placeholder 속성
- 입력 요소의 입력 필드 안에 나타나는 가이드 문자
- 사용자에게 입력을 어떤 형태로 해야 할지, 또는 입력 필드에 대한 설명을 정의해서 제공 가능
- required 속성
- 폼 전송 시, required 속성이 적용된 입력 요소에 입력 값이 없으면 폼 전송 못하게 막음
- 사용자로부터 입력 받을 값이 필수 값일 때 보통 사용
- autofocus 속성
- 사용자가 화면을 열었을 때 입력 요소에 자동으로 마우스 포커스 지정된 상태로 화면 열림
- ex. 로그인 창 열리면 로그인 ID에 autofocus
- autocomplete 속성
- 브라우저 메모리를 이용해서 아이디, 전화번호, 신용카드 번호 등의 데이터를
사용자의 브라우저 메모리에 저장했다가, 동일한 필드에서 사용자 입력이 진행되면
이미 등록된 데이터 리스트를 보여주고, 사용자가 빠르게 선택할 수 있도록 하는 기능
- pattern 속성
- JS 정규식을 input 요소에 적용해서 입력된 값이 정규식 패턴에 맞는지 자동 체크
- ex. 전화번호 입력 패턴 규칙 적용
4.4 그 외 Form 요소
- <label>
- 사용자 입력 받을 수 있는 요소의 레이블 설정
- 스크린 리더기 같은 장치를 사용하는 사용자에게 현재 입력할 요소가 어떤 데이터를 입력해야 하는지 알려줌
- 체크박스, 라디오 버튼 같이 크기가 작아서 사용자가 클릭하기 힘든 요소에 대해서 편리함 제공
- <select>
- 콤보박스
- 여러 개중 하나 선택
- 라디오 버튼 처럼 하나만 선택할 수도 있고, 체크 박스처럼 여러 개 선택도 가능
- 선택 항목 수 많아질 때 select 태그 이용하면 고정된 UI 제공할 수 있다는 장점
- ex. 거주 국가 선택
- multiple 속성 지정하면 여러 개 선택 가능
- size 속성은 화면에 한번에 보여줄 아이템 개수 지정
- <textarea>
- 여러 줄의 문장 입력 받는 요소
- rows 속성; 몇 줄 까지 보여줄지 결정
- cols 속성; 보여지는 넓이
- <button>
- 버튼 만들기 위한 태그
- type 속성은 반드시 "button"으로 설정
- input:button 에서는 value 값이 버튼 명이 되지만,
<button> 태그에서는 태그 안에 텍스트가 버튼 명이 됨
- <fieldset>과 <legend>
- <fieldset>: 폼 안에서 연관성 있는 요소들을 그룹으로 묶는 역할
- <legend>: <fieldset>으로 묶인 그룹을 설명하는 그룹 명
- <datalist>
- <select> 요소처럼 선택할 수 있는 여러 항목을 보여주고, 하나의 값을 선택할 수 있도록 해줌
- 직접 텍스트 기입 가능
- 미리 정의된 항목 리스트에서 하나의 항목 선택 가능
- 언제든지 내용 수정 가능
- 여러 개의 input 요소와 연결해서 사용 가능한 장점
- 만약 주어진 항목 내의 값만 입력받기 원하면
입력 받은 값이 <datalist> 항목에 있는 값인지 점검하는 로직 구현 필요
4.5 HTML 폼 속성
- action 속성
- 폼 submit 시킬 페이지 주소 정의
- method 속성
- 폼에 입력된 데이터를 전송할 때 어떤 방식으로 전송할 것이지 정의
- get 방식
- 사용자가 입력한 데이터를 전송할 url에 붙여서 전송하는 방식
- 비밀번호 같은 민감한 정보는 url에 보일 수 있으므로 get 방식 이용하면 안됨
- 전송하는 데이터 크기 제약 발생 가능 (URL 주소 길이 제한)
- 북마크 필요할 때 적용하면 효과적임
- post 방식
- 보안성 고려
- 전송하는 데이터가 사용자 눈에 보이지 않음
- 전송하는 데이터 크기 제약 없음
- target 속성
- 폼 데이터 전송할 때, 현재 보고 있는 페이지를 전환해서 전송할 페이지로 이동할지,
새 창을 이용해서 데이터를 전송할지, iframe을 이용해서 데이터를 전송할지에 대한 target 설정
- ex. _blank로 속성 값 지정하면 새 창을 통해서 데이터 전송
- formnovalidate 속성
- submit 버튼에 사용되는 속성
- 폼을 submit 할 때 입력된 값이 올바르게 입력되었는지 체크 안할 때 사용
- novalidate 속성
- <form> 태그에서 사용하는 속성
- formnovalidate 속성과 동일한 기능
[Reference]
'Books > HTML Basic ✔️' 카테고리의 다른 글
| [웹 개발 기초 HTML] 5장 - HTML 시맨틱 요소 (마지막) (0) | 2022.02.12 |
|---|---|
| [웹 개발 기초 HTML] 3장 - HTML 기본 (0) | 2022.02.12 |
| [웹 개발 기초 HTML] 2장 - 개발환경 구성 (0) | 2022.02.12 |
| [웹 개발 기초 HTML] 1장 - HTML (0) | 2022.02.12 |
댓글