label
폼요소에 이름을 붙이는 태그이다. 사용자가 어떤 내용을 입력할지 쉽게 알아볼 수 있도록
해주는 역할. 또한 폼 요송와 해당 이름을 연결해주고 나중에 자바스크립트를 통해 해당 폼 요소를 제어
할 수 있도록 도와줌.
[기본형]
1. <label for="폼요소 이름"> 내용 <input type="" id="폼요소 이름" name="폼요소 이름" /> </label>
2. <label for="폼요소 이름">내용</label>
<input type="" id="폼요소 이름" name="폼요소 이름" />
input태그
사용자가 정보를 입력할 수 있는 다양한 형태의 태그. 형태는 type속성에 의해 결정된다.
[type의 종류]
1. type="text"
: 한 줄짜리 텍스트를 입력할 수 있는 입력창. 보통 아이디, 이름 , 주소와 같은 정보를 입력할 때 쓴다. '텍스트 필들라고 부름'
2. type="password"
: 비밀번호 입력창. 모양은 text와 동일하게 생겼지만 글자를 입력하면 글자가 기호로 표현된다.
3. type="search"
: 검색창을 나타내는 태그. 모양은 텍스트 필드와 동일 하지만 글자를 입력하면 입력창 오른쪽에서 x자 표시가 뜸
x를 누르면 검색어를 지울 수 있다.
4. type="url"
:url을 입력할 수 있는 입력창.
5. type="email"
: 이메일을 입력할 수 있는 입력창. @표시가 있는지 없는지 여부를 입력창에서 검열하여 올바른 이메일 주소가 맞는지
1차로 확인해주는 역할
6. type="checkbox"
: 여러개의 항목을 체크할때 사용. 사용자로부터 어떠한 동의를 얻거나 2개이상의 항목을 체크할때 사용.
7. type="radio"
: 여러개의 항목 중 한 가지를 선택할때 사용. 이 타입은 모든 name속성 이름이 동일해야 여러 항목 중 한가지만 선택가능
*checkbox,radio는 value속성을 넣어주면 각 항목의 기본값을 지정할 수 있다. value에 있는 값은
form은 서버로 넘길때 같이 저장할 수 있고, 나중에 자바스크립트로 제어할 수 있다. 8. type="range" min="최솟값" max="최댓값" step="증감" value="초깃값"
: 슬라이드 막대로 숫자 범위를 설정할 수 있다. min은 범위의 최솟값을 의미하고, max는 최댓값을 뜻함.
min이나 max가 따로 설정 되어있지 않으면 최솟값은 0 최대값은 100으로 설정
step은 증감값으로 예를 들어 5라는 숫자가 있으면 5씩 증가하거나 5씩 감소한다ㅏ.
VALUE는 범위에서 사용자에게 처음 보여주는 초깃값을 말함.
9. type="number" min="최솟값" max="최댓값" step="증감" value="초깃값"
: 숫자 입력 필드를 말한다. 보통 쇼핑몰 같이 수량을 체크해야하는 사이트에서 많이 사용함.
10. type="date", type="month", type="week"
: 웹 문서나 어플에 달력을 넣고자 할때 사용함. date는 연도, 월, 일로 표현이 되며
month는 연도, 월을 입력할 수 있다.
week는 연도, 주를 입력할 수 있다.
- date : yyyy-mm-dd
- month : yyyy-mm
- week : 1월 첫째 주를 기준으로 몇 번째 주인지 표시
11. type="time", type="datetime", type="datetime-local"
: 입력 폼에서 오전/오후 시/분을 나타냄. 시간 필드는 웹 브라우저마다 조금씩
다르게 나타나는데 항목이 3가지로 구분 된다는 점은 모두 동일하다.
datetime,datetime-local 사용자가 웹 문서를 보고 있는 장소에 맞는 날짜와 시간을 함께 입력할 수 있다.
12. type="submit", type="reser" type="button"
: submit은 전송 버튼을 의미하면 action에 쓰여진 서버 주소로 전송한다.
reset는 초기화 버튼을 의미하며 사용자가 입력한 버튼을 초기화 할때 사용함.
submit버튼과 reset버튼에 value속성을 이용하면 버튼의 이름을 바꿀 수 있다.
buttond은 기본 기능이 없는 깡통버튼을 의미함. 오직 버튼 형태만 나타나며
value속성을 이용해 이름을 정해줌. 자바스크립트로 기능을 넣을때 많이 사용되는 기능.
13. type="image" src="이미지경로" alt="이미지설명"
: submit과 같은 기능을 하는 이미지 버튼을 나타낸다.
14. type="file" accept="첨부파일 유형(img/jpg, img/png, image/*)"
: 폼에서 사진이나 문서를 첨부할때 사용하는 유형이다. 웹브라우저 화면에서 [파일 선택]이나 [찾아보기]
같은 형태로 나타난다.
15. type="hidden" name="이름" value="서버로 넘길 값"
:히든 필드는 화면의 폼에서는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소를
말한다. 사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야하는 정보는 히든 필드로 입력한다.
-
인풋 타입 텍스트 한 번 해보기 [기본값임]
< form action="#" method="post" name="member">
< label for="user_name">< /label>
이름: < input type="text" id="user_name" name="user_name" />
< /form>
-
두 번째
type="text"< label for="user_id">아이디 :
<input type="text" id="user_id" name="user_id"많이 쓰는 건 두 번째 방식이라서 응용해보기
type="password"
< label for="user_pw">비밀번호 :
< input type="password" id="user_pw" name="user_pw" />
type="search"
글씨쓰면 옆에 엑스가 뜨는게 포인트이다.
type="url"
얘는 id와 name는 유저를 빼도 됨
why??
위는 각 이름에 해당하는 태그가 있어서 겹치면 안 됐지만
얘는 sns가 들어가는 태그가 없어서 그럼 !!!!!!!!!!
여기서 알 수 있는 것은 절대 이름이 겹치면 안 된다는 것!!!!!!!
type="email"
검사를 안 해주는이유는 서버가 확인 버튼을 눌렀을때(보내려고 할때) 그 때 시작을 해서 내가 쓸때는 올바르지 않은 어쩌고 안 뜨는 거임
type="radio"
type="radio"
응용해서 해보기 !
name는 동일해야한다 !!!!!!!!라디오만 !!
안 그럼 여러개 선택해야한ㄴ 것들이 한 개씩만 눌러지게 됨
무조건 레이블 안에 인풋이 있어야지 사용자가 글씨를 선택했을떄
클릭이 된다. 형제 값으로 되어있으면 선택이 안 되게 때문에
이 부분 유의하여 작성해야한다.
근데 라디오는 요즘 잘 안 씀 !
요즘은 버튼이나 박스로 만들 수도 있기 떄문!
type="range" min="최솟값" max="최댓값" step="증감" value="초깃값"
min이 0이어야지 막대가 끝까지 가고
스탭은 움직일때 얼만큼 크게 움직일건지이다. 
type="number" min="최솟값" max="최댓값" step="증감" value="초깃값"
최소값과 최대값이 입력 되었기 때문에 제한이 되어있고
여기에 step5를 넣으면 5씩 5, 10, 15,20이런식으로
올라가거나 내려간다 !!!!!!!!!!
type="date", type="month", type="week"
type="time", type="datetime", type="datetime-local"
날짜 시간도 표현이 됨. (이러한 기능들을 작성 다 하고 서버로 보내주는 버튼!!!)
ex)확인 버튼 
type="submit", type="reser"
value로 버튼의 이름을 바꿔줄 수 있다.
깡통버튼 input type="button" value="button"
why있냐? 기능이 들어가야할때
일단 준비해놓는것
type="image" src="이미지경로"
(버튼인데 태그가 넘어간다는 -div에 하는게 편함)
type="file"
< input type="file" accept="image/*" />
이건 전부라는 표시이다. jpg말고도 모든 파일을 허용하겠다라는 뜻
type="hidden" name="이름" value="서버로 넘길 값"
-------------------------------------------input태그의 주요 속성
**1.autofocus**
:페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.
입력요소 중 텍스트를 입력할 수 있는 양식에 autofocus를 사용하면 입력 커서가 깜빡이면서 텍스트를 바로 입력할 수 있다.
**2.required**
:필수 입력란을 지정함. 이 속성이 들어있는 input은 반드시 사용자가 입력을 해야만 전송버튼을 눌렀을때 폼양식을
서버로 보내줄 수 있다.
**3.placeholder**
:사용자가 텍스트를 입력할때 적당한 힌트 내요을 표시해주는 안내문구.
텍스트를 입력하면 힌트가 사라지고 텍스트를 지우면 다시 힌트가 나온다.
**4.readonly**
:읽기 전용이라는 뜻을 가진 속성. readonly를 적용하면 사용자는 텍스트를 입력할 수 없고, 읽기만 가능하다. 
autofocus
placeholder
readonly
