Codecademy - HTML - Forms
1. hr
수평선
2. Form
전송할 정보를 수집하는 폼
action: 폼을 전송할 서버 쪽 스크립트 파일을 지정method: 폼을 서버에 전송할 http 메소드 (GET or POST)
- GET과 POST는 브라우저에서 폼 데이터를 가져와 서버로 보내는 같은 기능, 다른 방식
-GET: 폼 데이터를 URL 끝에 붙임
-POST: 보이지 않게 보냄input: name 설정, box 안의 내용이 value,name=value로 전송됨.
다양한 type을 가짐
-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 생성.
select와 비슷해보이지만 datalist는<input type="text">와 함께 사용
입력창에 직접 입력 가능textarea: 큰 text field.
rows, cols로 크기 설정
Codecademy - HTML - Form validation
1. required
<input type="xx" required>
required 추가해주면 반드시 입력해야하는 창으로 만들어줌
2. min, max
<input type="number" min="xx" max="xx">
number, range 에서 이용
3. minlength, maxlength
<input type="number" minlength="xx" maxlength="xx">
4. pattern
정규표현식
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Codecademy - HTML - Semantic HTML
<div class="header"> 이런 식으로 div 태그 쓰는 대신에 semantic tag 사용하면 코드 보기 좋음
딱히 설명 적을 게 없는..😶
