<form>
<form>
의 속성<form action="">
입력 값을 전송할 페이지 <form method="">
데이터를 전송할 방법 정의<input>
- type : 태그 모양 변경 가능
- name : 태그 이름 지정
- readonly : 읽기 전용 태그
- maxlength : 최대 글자 수 지정
- minlength : 최소 글자 수 지정
- required : 필수 태그로 지정
- autofocus : 웹 페이지 로딩되면 이 속성 지정한 태그로 포커스 바뀜
- placeholder : 입력할 값에 대한 힌트
- pattern : 정규 표현식 사용하여 특정 범위 내 유효한 값 입력 받을 때 사용
- text
- button
- password
- search
- date
- time
- range
- number
- color
- radio : 선택 항목 중 하나만 선택 가능
- checkbox : 선택 항목 중 0개 이상 선택 가능
- file
- url
- tel
<label>
시각 장애인분들도 폼을 사용할 수 있도록 시멘틱한 <label>
요소 사용
- 텍스트의 설명과 폼 입력 모두를 포함하는 방식
<label>
이름 :
<input type="text" name="name">
</label>
- 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식
<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">
input
과 같은 폼 컨트롤을 의미input
, select
, textarea
와 같은 요소들)for
속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야함 <select>
<select>
속성들multiple="multiple"
ctrl
이나 command
버튼 클릭해야 선택 가능 multiple
로 작성 가능 ! size
- 드롭다운에서 한번에 보여줄 옵션의 개수 정함
<option>
속성들value
: 서버에 어떤 값을 전송할지 서정selected
: 페이지가 로딩되고 난 뒤 기본적으로 선택되는 옵션selected
옵션 사용하지 않으면 첫번째 옵션 선택되고<option value="0">선택</option>
하면 선택이 가장 먼저 나옴 ! <fieldset>
<fieldset>
를 통해 자식요소로 사용되는 폼 컨트롤을 그룹화할 수 있음 <legend>
태그<fieldset>
태그 바로 뒤에 위치 (<fieldset>
의 첫번째 자식)<button>
<input type="reset">
form의 모든 값 초기화<input>
열린 태그 , 닫는 태그 없음 !!<button>
열린 태그 닫힌 태그 있으니<textarea>
cols
: textarea가 보여줄 입력창의 넓이.rows
: textarea 입력 창이 기본적으로 보여줄 입력 줄 수.<textarea name="" id="" cols="40" rows="10" maxlength="10" minlength="5"></textarea>
<datalist>
<datalist>
는 <select>
와 <input>
을 섞어서 사용하는 것<input>
의 list
속성을 이용해 <datalist>
요소의 id
속성과 연결하여 사용. 사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공
<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
<option value="수성">수성</option>
<option value="금성">금성</option>
<option value="지구">지구</option>
<option value="화성">화성</option>
</datalist>
select
에서 선택해야만 제출하게 하려면required
속성 지정 후 첫번째 option
에 value=""