HTML - 요소((양식) form, input, label, button, textarea, fieldset, legend, progress)

<form>

웹 서버에 정보를 제출하기 위한 양식 범위를 정의한다. *<form>이 다른 <form>을 자식 요소로 포함할 수 없다.

action : 전송한 정보를 처리할 웹페이지의 URL.

autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 구분. (on, off)

method : 서버로 전송할 HTTP(Hypertext Transfer Protocol) 방식. (GET, POST)

name : 고유한 양식의 이름.

novalidate : 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 설정.

target : 서버로 전송 후 응답받을 방식을 지정. (_self, _blank)

 

<input />

사용자에게 입력 받을 데이터 양식.

autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 구분. (on, off)

autofocus : 페이지가 로드될 때 자동으로 포커스 인. *문서 내에 고유해야 한다.

checked : 양식이 선택되었음을 표시한다. *type 속성 값이 radio, checkbox 일 경우에만.

disabled : 양식을 비활성화 한다.

form : <form>의 id 속성 값. *해당 <form>의 자식이 아닐 경우에만.

list : 참조할 <datalist>의 id 속성 값.

max : 지정 가능한 최대 값. *type 속성이 number일 경우에만.

min : 지정 가능한 최소 값. *type 속성이 number일 경우에만.

maxlength : 입력 가능한 최대 문자 수. *type 속성이 text, email, password, tel, url일 경우에만.

multiple : 둘 이상의 값을 입력 할 수 있는지 여부. *type 속성이 email, file일 경우에만.

name : 양식의 이름.

placeholder : 사용자가 입력할 값의 힌트. 미리 보여지는 값.

readonly : 수정 불가능한 읽기 전용으로 설정.

step : 유효한 증감 숫자의 간격. *type 속성이 number, range일 경우에만.

src : 이미지의 URL. *type 속성이 image일 경우에만.

alt : 이미지의 대체 텍스트. *type 속성이 image일 경우에만.

type : 입력받을 데이터의 종류.**

value : 양식의 초기 설정 값.

 

**데이터 종류(Type)의 값(Values) *type 속성에 입력할 수 있는 값.

button : 일반 버튼

checkbox : 체크 박스

color : 색상 *IE 지원하지 않음.

email : 이메일

file : 파일

hidden : 보이지 않지만 전송할 양식. *value 속성으로 값을 지정.

image : 이미지 제출 버튼. *<img /> 처럼 사용 가능.

number : 숫자.

password : 비밀번호.

radio : 라디오 버튼. *같은 name 속성 그룹 내 하나만 선택 가능함.

range : 범위 컨트롤. *min, max, step, value 속성 사용.

reset : 초기화. *해당 <form> 범위 내 모든 양식.

search : 검색.

submit : 제출 버튼. *해당 <form> 범위 내 고유한 양식.

tel : 전화번호.

text : 일반 텍스트.

url : 절대 URL.

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>
 
<!-- input - type -->
<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="text" />
...

 

<label>

라벨 가능 요소의 제목. *<button>, <input>, <progress>, <select>, <textarea>

for : 참조할 라벨 가능 요소의 id 값.

<!-- 라벨 가능 요소를 참조 -->
<label for="user-agreement">동의하십니까?</label>
 
<!-- 라벨 가능 요소를 포함 -->
<label><input type="checkbox" />동의하십니까?</label>

 

<button>

선택 가능한 버튼을 지정.

autofocus : 페이지가 로드될 때 자동으로 포커스 인. *문서 내에 고유해야 한다.

disabled : 버튼을 비활성화 한다.

form : <form>의 id 속성 값. *해당 <form>의 자식이 아닐 경우에만.

name : 폼 데이터와 함께 전송되는 버튼의 이름.

type : 버튼의 타입. *button, reset, submit

<button type="button">Click Me!</button>

 

<textarea>

여러 줄의 일반 텍스트 양식.

autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 구분. (on, off)

autofocus : 페이지가 로드될 때 자동으로 포커스 인. *문서 내에 고유해야 한다.

disabled : 버튼을 비활성화 한다.

form : <form>의 id 속성 값. *해당 <form>의 자식이 아닐 경우에만.

maxlength : 입력 가능한 최대 문자 수. *type 속성이 text, email, password, tel, url일 경우에만.

name : 양식의 이름.

placeholder : 사용자가 입력할 값의 힌트. 미리 보여지는 값.

readonly : 수정 불가능한 읽기 전용으로 설정.

rows : 양식의 줄 수

<label for="multiline-text">Multiline Text</label>
 
<textarea id="multiline-text" name="multiline-text" rows="4" cols="50">
The official site for Star Wars, featuring the latest news on Star Wars movies, series, video games, books, and more.
</textarea>

 

<fieldset>

같은 목적의 양식을 그룹화 한다.

disabled : 그룹 내 모든 양식 요소를 비활성화 한다.

form : 그룹이 속할 하나 이상의 <form> id 속성 값.

name : 그룹의 이름.

<legend>

<fieldset>의 제목을 지정한다.

<fieldset>
    <legend>Coffee Size</legend>
    <label>
        <input type="radio" name="size" value="tall" />
        Tall
    </label>
    <label>
        <input type="radio" name="size" value="grande" />
        Grande
    </label>
    <label>
        <input type="radio" name="size" value="venti" />
        Venti
    </label>
</fieldset>

 

<select>

옵션을 선택하는 메뉴.

autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 구분. (on, off)

disabled : 선택 메뉴를 비활성화 한다.

form : 선택 메뉴가 속할 하나 이상의 <form>의 id 속성 값.

multiple : 다중 선택 여부.

name : 선택 메뉴의 이름.

size : 한 번에 볼 수 있는 행의 개수.

 

<datalist>

<input>에 미리 정의된 옵션을 지정하여 자동완성 기능을 제공하는데 사용.

<input>의 list 속성 바인딩.

<option>을 포함하여 정의된 옵션을 지정.

 

<optgroup>

<option>을 그룹화.

label : (필수)옵션 그룹의 이름.

disabled : 옵션 그룹을 비활성화 한다.

 

<option>

선택 메뉴<select>나 자동완성<datalist>에서 사용될 옵션.

label : 표시될 옵션의 제목. *생략되면 포함한 텍스트를 표시.

disabled : 옵션을 비활성화 한다.

selected : 옵션이 선택되었을을 표시.

value : 양식으로 제출될 값. *생략되면 포함된 텍스트를 값으로 사용.

 

<select>
  <optgroup label="Coffee">
    <option>Americano</option>
    <option>Caffe Mocha</option>
    <option label="Cappuccino" value="Cappuccino"></option>
  </optgroup>
  <optgroup label="Latte" disabled>
    <option>Caffe Latte</option>
    <option>Vanilla Latte</option>
  </optgroup>
  <optgroup label="Smoothie">
    <option>Plain</option>
    <option>Strawberry</option>
    <option>Banana</option>
    <option>Mango</option>
  </optgroup>
</select>
 
<!-- datalist 사용하기 -->
<input type="text" list="fruits">
 
<datalist id="fruits">
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Mango</option>
  <option>Fineapple</option>
</datalist>

 

<progress>

작업의 완료 진행률을 표시. 진행바.

max : 작업의 총량.

min : 작업의 진행량. *max 속성을 생략할 경우 0~1 사이의 숫자여야 함.

<progress value="70" max="100">70 %</progress>