반응형
5. HTML의 요소(5)
7) 폼 관련 요소
✔ <form>
<form>요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.
- 일방적으로 사용자에게 정보를 전달하는게 아닌 정보를 다시 돌려받기도 함
- form 요소에 한계가 있기 때문에 더 섬세한 컨트롤은 JS로 함
✔ <form> - action, method 속성
- action: 지정한 경로로 form 정보를 보내줌
- method: 양식을 제출할 때 사용할 HTTP 메서드
- post: 양식 데이터를 요청 본문으로 전송함. 서버에 보이지않게 전송
- get: 양식 데이터를 action URL과 ? 구분자 뒤에 이어붙여 전송함. 보안 취약
- dialog: 양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫음
button, input type="submit", input type="image" 요소의 formmethod 특성으로 재정의 가능
✔ <label>
<label>요소는 사용자 인터페이스 항목의 설명을 나타냄
- 형제요소로 사용할 때 for로 명시를 해줘야함
- 자식요소로 사용할 경우 명시하지 않아도 됨
- 웹 접근성 측면에서 텍스트로 입력 해야 좋음
✔ <input> : 입력 요소
<input>요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
- 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재함
- HTML에서 제일 강력하고 복잡한 요소 중 하나
- 한 줄의 입력만 가능함. 엔터시 제출됨
- minlength: 최소 입력 글자
- maxlength: 최대 입력 글자 자주 사용하는 type
- text 관련 type
- password: 자동 마스킹
- tel: 유효성 검사는 하지않음. 숫자 키패드가 올라옴
- number: 숫자 제외 다른 값 입력 시 오류 알림
- 선택 관련 type
- range: 폼 제출 시 숫자 값으로 제출됨
- date: 날짜(시간제외)를 지정할 수 있음
- month: 연, 월 지정 가능
- week: 시간 제외 주-년, 주의 값 입력 가능
- time: 시간대가 없는 시간값을 입력 가능
- 제출 관련 type
- submit: 기본값 제출. value로 변경 가능
- button: 빈 버튼 형태
- reset: 값 초기화 버튼
- checkbox: 네모 체크박스. 체크 한 value가 제출됨
- radio: 동그란 체크박스. 동시선택을 안되게 하려면 name을 똑같게 만들면 됨
input 속성
- name
- 제출 시 name=입력값으로 들어감
- 어떤 데이터인지 구분할 수 있음
- placeholder
- input 안에 어떤 값이 들어갈지 힌트를 줌
- autocomplete
- 이전에 입력했던 값을 보여줌
- required
- input 값이 없을 경우 제출을 막음(그럼 굳이 JS를 사용할 필요가..?)
- disabled
- input을 비활성화 시킬 수 있음
- form 데이터에 포함되지 않음
- readonly
- 읽기 전용으로 만듦
- value로 미리 값을 지정할 수 있음
- 수정만 불가능하고 데이터 전송 가능
- step
- 간격 설정
- ex) step="2" 일 때, 값이 2씩 올라감
- min, max
- min, max로 정해놓은 범위만 선택 가능
- list & datalist
- label은 input의 id를 보고 input은 datalist의 id를 봄
- select은 선택한 요소의 값을 수정할 수 없음
- list는 type이 text이기 때문에 직접 수정 가능
✔ <fieldset>, <legend>
<fieldset>요소는 웹 양식의 여러 컨트롤과 레이블(label)을 묶을 때 사용한다.
<legend>요소는 부모 <fieldset> 콘텐츠의 설명을 나타낸다.
- <fieldset>요소의 첫 번째 자식이 무조건 <legend>이어야 함
- 브라우저마다 스타일링이 다름. 통일된 스타일링은 div로
- disabled: 모든 자손 컨트롤을 비활성화 함. form 제출 시 데이터에 포함안됨
fieldset을 사용하면 div로 한 번 더 묶을 필요가 없음
✔ <button>
<button>요소는 클릭 가능한 버튼을 나타낸다.
- <input>요소보다 스타일을 적용하기 훨씬 수월하다.
- button type
- submit: 버튼이 서버로 양식 데이터를 제출함
- reset: input처럼 모든 컨트롤을 초깃값으로 되돌림
- button: 기본 행동이 없지만 사용자측면에서 명시해주는 것이 좋음
- input과 다른 점
- 자식을 가질 수 있음: 문자열을 포함하여 내부에 이미지, 태그 등을 넣을 수 있음
- 내용을 입력 해줘야 버튼에 value가 보임
✔ <select>, <option>, <optgroup>
- <select>요소는 옵션 메뉴를 제공하는 컨트롤을 나타낸다.
- option 목록으로 값을 선택할 수 있음
- <option>요소는 옵션 메뉴 항목을 제공한다.
- value 값이 없으면 내부 컨텐츠를 사용
- select에 required 설정 시, value값이 ""이면 제출이 안됨
- selected 속성으로 기본 값 설정 가능
- <optgroup>요소는 옵션 메뉴 항목을 그룹화 시킨다.
- label을 사용하여 그룹마다 이름 설정 가능
✔ <textarea>
<textarea>요소는 멀티라인 일반 텍스트 편집 컨트롤을 나타낸다.
- 여러 줄의 멀티라인 텍스트를 받을 수 있음
- cols, rows 속성으로 열, 행 설정 가능
- pre태그와 동일하게 그대로 출력됨
- input과 비슷한 속성을 사용할 수 있음
반응형
