form
정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
회원가입, 로그인 등
action
목적지의 주소.
양식 데이터를 처리할 프로그램의 URI.
<button>, <input type="submit"> (en-US), <input type="image"> (en-US) 요소의 formaction 특성으로 재정의할 수 있습니다.
method
양식을 제출할 때 사용할 HTTP 메서드.
1. post
POST 메서드.
양식 데이터를 요청 본문으로 전송합니다.
HTML이 아닌 서버에만 작동
주소란에는 드러나지 않음.
2. get
GET 메서드.
양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다.
주소란에 입력값이 그대로 뜨기 때문에 검색 같은 경우 사용. 회원가입, 설문조사에는 부적합
3. dialog
양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.
label
input과 set로 생각하면 된다.
스크린리더가 그림같은건 인식을 잘 못하므로 되도록 텍스트를 쓰도록 하자
for
같은 문서 내의 <label>요소로서, 레이블 가능한 form-related 요소의 id.
가령 input이 여러개 일 때, 하나만 지정하기 위하여 input id를 입력하면 됨.
input과 형제로 있을 경우 필수.
input이 자식으로 있으면 없어도 됨
input
입력요소
빈요소.
type
-
text, password, email, tel, date, month, time,
-
number, range 등 숫자 관련 속성
type형제로 min / max로 최소, 최대 숫자 설정 가능, step으로 몇씩 오르고 내릴지 설정 가능
-
submit(button type submit과 동일하게 사용가능, value로 text입력)
-
button(모양만 버튼. 제출은 안됨.)
-
reset(모든 정보 초기화)
-
checkbox
ex) <input type="checkbox" name="check2" checked>정했을 시
기본 값이 체크 된 상태로 설정된다
- radio
다른걸 여러개 만들 시 동시선택이 되므로 묶고 싶다면 name을 똑같이 하면 된다.
value로 구분하면 됨.
마찬가지로 checked 설정 가능함
ex) 하나만 체크되도록 할 때 (checked 되도록)
<ul class="option-list">
<li class="option-item">
<input
type="radio"
id="rd1"
class="input-radio"
name="base"
checked/>
<label for="rd1" class="label">
<span class="label-txt">추천대로</span>
<span class="label-icon"></span>
</label>
</li>
<li class="option-item">
<input
type="radio"
id="rd2"
class="input-radio"
name="base"
/>
<label for="rd2" class="label">
<span class="label-txt">채소볼</span>
<span class="label-icon"></span>
</label>
</li>
<li class="option-item">
<input
type="radio"
id="rd3"
class="input-radio"
name="base"
/>
<label for="rd3" class="label">
<span class="label-txt">곡물볼</span>
<span class="label-icon"></span>
</label>
</li>
</ul>
name
서버에 전송할때 폼 데이터를 구분하기 위해
id
전체 문서중에 구분하기 위해 있는 구분자.
name과 동일할 필요는 없으나, 다른 input id와 겹치면 안되고 lavel for에 들어갈 이름이랑 일치 해야 함
label과 형제로 있을 경우 필수.
label에 input이 자식으로 있으면 없어도 됨
대소문자 구분 가능, 공백 포함 불가능, 숫자로 시작 불가능
minlength
입력할 수 있는 최소 글자 수
maxlength
입력할 수 있는 최대 글자 수
placehoder
사용자에게 어떤걸 넣어야할지 힌트를 입력하는 것. 회색으로 보인다
autocomplete
이전 입력한 것들을 자동완성 할 수 있는 기능.
on으로 설정 시 이전에 작성했던 걸 후보로 보여줌
off는 자동완성 X
required
input을 입력하지 않고 제출할 경우 입력란을 작성하라고 문구가 뜸
disabled
입력을 비활성화 함
입력, 전송 모두 안됨
readonly
읽기 전용. 값 입력 불가능.
value로 기본 값을 입력해놓고 고정하고 싶을 때 사용
입력만 안되고 전송은 됨
fieldset
웹 양식의 여러 컨트롤과 레이블()을 묶을 때 사용합니다.
disabled
묶은 input들을 비활성화 함
legend
부모 <fieldset> 콘텐츠의 설명을 나타냅니다.
fieldset 첫번째 자식으로 들어가야함
fieldset 및 legend
button
자식을 가질 수 있으므로 내부에 다른 태그를 넣어 스타일링을 할 수 있음.
<button>요소는 <input> 요소보다 스타일을 적용하기 훨씬 수월합니다.
<input>은 value 특성에 텍스트 값밖에 지정할 수 없지만, <button>은 내부 HTML 콘텐츠(<em>, <strong>, 심지어 <img>도)에 더할 수 있습니다.
submit
버튼이 서버로 양식 데이터를 제출합니다.
지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
reset
<input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
button
기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다.
클라이언트측 스크립트와 연결할 수 있습니다.
select
옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
label이 향하는 id,
name 지정
option태그로 후보군을 넣으면 됨
option
select 후보군.
유저들에게는 한글로 입력하지만 서버에는 영어로 입력하고 싶은 경우?
-> value속성 이용.
첫번째 옵션을 선택하라는 문구를 넣고, 그 값을 제출 못하도록 하는 방법?
-> select 속성에 required를 넣고,
option에 value를 아예 넣지 않는다면 그대로 제출이 되므로 첫번째 옵션 value값을 비게 놔두면 됨.
처음 뜨는 옵션을 지정해두고 싶다면?
-> 해당 옵션에 selected를 넣으면 됨
<label for="movie">영화</label>
<select id="movie" name="movie" required>
<option value=""> 선택해주세요 </option>
<option value="zootopia">주토피아</option>
<option value="toystory">토이스토리</option>
</select>
<input type="submit"/>
</form>
optgroup
옵션을 구분 짓고 싶을 때
datalist
다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 요소 여럿을 담습니다.
select는 이미 지정된 값을 고르는 것이고,
datalist는 추천된 것을 미리 보고, 수정해서 제출 가능함.
textarea
input과 비슷하게 동작하지만, 빈요소가 아니며
여러줄, 즉 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.
일반적으로 두줄이 보이고 스크롤이생기지만, rows 속성을 이용해 조절 할 수 있습니다.
cols를 이용해 열 크기를 조절 할 수 있습니다.
폰트에 따라 다르므로 가로세로를 조절하고 싶으면 CSS 이용하는 것이 간편합니다.
