220221 - html

7. Html forms

### label, input

- input: type 에 따라 자동완성이 달라지기도 하고, 모바일의 경우 가상키보드의 레이아웃이 달라진다. 데스크탑은 입력값이 달라진다.

- label: label 의 for 값과 input 의 id 에 동일한 값을 넣으면 label 을 선택시 input 에 포커스가 간다. Input 과 label 을 항상 연결해준다.

 

### fleldset, legend : form 내부에서 구역을 나눌 때 사용한다

- fieldset : form 을 그루핑 시켜 관심사가 묶여있는 여러 input 요소를 그루핑 할 때 사용

- legend: fieldset 으로 그루핑된 영역의 타이틀을 표시한다

 

### button

- button 의 기본 목적은 form 을 submit 하는 것, form 내부에서 작성시 어딘가로 form 의 내용을 재출하는 역할을 한다.

- Submit 동작이 아닌 자바스크립트를 동작시키고자 한다면 button type=button 을 작성해야한다.

- form 내부의 값을 리셋시키고자 한다면 type=reset

 

### input

- checked 속성을 넣어두면 선택된 상태에서 렌더링된다.

- input type radio : 여러개의 선택지 중 하나를 선택할 때 사용

- input type checkbox : 여러개의 선택지 중 여러개의 값을 선택할 때 사용

 

### autocomplete, require 속성

- autocomplete : 자동완성 지원여부, 기본 on 은 브라우저의 자동완성 허용.

- required : 입력 필수값에 작성하면 반드시 입력을 해야한다.

<form>
    <fieldset>
        <legend>user info</legend>
        <div>
            <label for=uid >ID</label>  // username 을 자동으로 가지고 온다
            <input id=uid type=text autocomplete=username required> 
        </div>
        <div>
            <label for=upw>password</label>
            <input id=upw type=password autocomplete=password required>
        </div>
    </fieldset>
    <fieldset>
        <legend>delivery info</legend>
        <div>
            <label for=tel>phone number</label>
            <input id=tel type=tel autocomplete=tel>
        </div>
        <div>
            <label for=addr>addr</label>
            <input id=addr type=text autocomplete=stree-address>
        </div>
        <div>
            <h2>사이즈 선택</h2>
            <input type=radio id=small name=size value=small checked>
            <label for=small>small</label>
            <input type=radio id=medium name=size value=medium>
            <label for=medium>medium</label>
            <input type=radio id=large name=size value=large>
            <label for=large>large</label>
        </div>
        <div>
            <h2>토핑선택</h2>
            <input type=checkbox id=cheese name=topping value=cheese>
            <label for=cheese>치즈 추가</label>
            <input type=checkbox id=tomato name=topping value=tomato>
            <label for=tomato>토마토 추가</label>
            <input type=checkbox id=mushroom name=topping value=mushroom>
            <label for=mushroom>버섯 추가</label>
        </div>
        <div>
            <label for=requirment>추가 요청 사항</label>
            <textarea id=requirment></textarea>
        </div>
    </fieldset>
    <button type=submit>order</button>
    <button type=button>cancel</button>
</form>

 

 

---

초보자를 위한 HTML 강의 정리

https://inf.run/drB2

초보자를 위한 HTML 기초 - 인프런 | 강의