Codecademy - HTML - Forms
hr
수평선
Form
전송할 정보를 수집하는 폼
action
: 폼을 전송할 서버 쪽 스크립트 파일을 지정method
: 폼을 서버에 전송할 http 메소드 (GET or POST)GET
: 폼 데이터를 URL 끝에 붙임POST
: 보이지 않게 보냄input
: name 설정, box 안의 내용이 value, name=value
로 전송됨.type="text"
: 그냥 text!🙄type="password"
: 비밀번호가 가려진 형식으로 입력된다!🙄type="number"
: 숫자만 입력가능, step 속성으로 화살표 버튼 넣을 수 있음!🙄type="range"
: 슬라이더!🙄 (min, max, step 설정 가능)type="checkbox"
: 체크박스!🙄type="radio"
: 선택하는 동그란 버튼 (라디오 버튼)!🙄type="submit"
: 폼 제출 버튼!🙄label
: for을 사용하여 다른 요소와 결합 가능. 이때 label
의 for 속성값은 결합하려는 요소의 id 속성값과 같아야 함section
: 구획 요소 (div
는 스타일링을 위해 사용되는 편)select
: dropdown list 생성datalist
: datalist 생성.<input type="text">
와 함께 사용textarea
: 큰 text field.Codecademy - HTML - Form validation
required
<input type="xx" required>
required 추가해주면 반드시 입력해야하는 창으로 만들어줌
min
, max
<input type="number" min="xx" max="xx">
number, range 에서 이용
minlength
, maxlength
<input type="number" minlength="xx" maxlength="xx">
pattern
정규표현식
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Codecademy - HTML - Semantic HTML
<div class="header">
이런 식으로 div 태그 쓰는 대신에 semantic tag 사용하면 코드 보기 좋음
딱히 설명 적을 게 없는..😶
header
, nav
main
, footer
article
, section
aside
figure
, figcaption
audio
, video
, embed