- 그때그때 사용하기 위해 mdn사이트 url을 추가하였다.
1. form태그
입력 창, 비밀번호, check box, button 등
Login 입력창 Form태그
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
<form action="" method=""양식 데이터를 처리할 프로그램의 최종 목적지이다.
- method : 양식을 제출할 때 사용할 http메서드
ex. method :
GET (보안에 취약하다) 주로 검색기능에 사용한다.
POST : 주소창에 입력한 주소가 보이지 않는다.
2. label 태그
id 전역속성으로 구분을 하기 위한 속성이다.
<label for="name">이름 :</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
label - input과 한 쌍으로 사용한다.
- input 유형 요소 종류를 여기서 확인 가능하다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/input
3. fieldset 태그
웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용한다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset
legend요소는 부모 fieldset콘텐츠의 설명을 나타낸다.
= 플로우 컨텐츠이기 때문에 div태그로 묶어주어도 상관없다.
4. input-type(text)속성
<input type="text" name="text" minlength="" maxlength="">minlength와 maxlength를 사용할 수 있다. 사용할 수 있는 type이 정해져 있다.
5. input-type(number)속성
<input type="range" name="range">range를 통해 바로 숫자를 조절 가능하다.
date를 통해 연,월,일 선택이 가능하다.
time을 통해 시간 선택이 가능하다.
6. input-type(submit)
<input type="checkbox" name="check1>
name을 동일하게 만들면 동시 선택이 되지 않는다.
<input type="checkbox" name="check1" checked>
checked라고 선택하면 이미 체크 된 상태로 입력값을 줄 수 있다.
<input type="submit" value="빈 버튼">name="동일한 값을 주어야 한다" => 동시 선택 방지
checked라는 속성을 추가 => 이미 체크 된 상태로 입력값을 줄 수 있다.
input color :
can i use를 google에 입력하면 브라우저 지원 범위가 나타난다. 항상 호환 여부를 검색해야 한다.
7. input - name, placeholder, autocomplete, required 속성
placeholder="입력값" : input box안에 hint값
autocomplete="on" : 자동 완성 기능이 추가가 된다.
required : 오류 메시지를 확인하는 메시지를 나타낸다.
8. input - disabled, readonly 속성
disabled : input box에 값을 입력하지 못하게 만드는 코드이다.
readonly : 값이 입력이 되지않고 읽기전용으로 된다.
9. input - step, min, max
<input type="number" id="score" min="-10" max="10" step="3"/>step은 3씩 증가하도록 하는 코드이다.
10. button
<input type="reset" value="RESET!"/>아이콘을 넣으려면 아이콘에 대한 텍스트 설명과 함께 작성하는 것이 좋다.
11. select, option, optgroup
option을 선택할 수 있는 select메뉴가 나온다. 후보군을 option을 통해 넣어줘야 한다.
selected : 다른 값을 골라도 selected지정된 값을 선택하도록 돌아오다.
disalbed : 선택이 불가능하도록 지정이 가능하다.
12. input - list속성과 datalist
datalist 다른 컨트롤에서 고를 수 있는 가능한, 추천하는 선택지를 나타내는 option태그를 담는것이다.
이건 보통 저장된 값을 나타낸다. = 추천된 값
13. textarea
사용법 :
https://developer.mozilla.org/ko/docs/Web/HTML/Element/textarea
input타입 text와 유사하지만,
여러 줄을 받을 수 있다.
