[HTML 개념잡기] HTML의 요소(5)

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: 자동 마스킹
  • email
  • 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과 비슷한 속성을 사용할 수 있음