Form 태그/ input 태그와 속성/ laber태그 - HTML 0612

◎Form 태그 

사용자에게 데이터나 정보를 받고싶을때 사용한다.

<form action = " API 주소 "  method = " 정보전달 방식 "></form>

 

속성값 : action / method 

사용자에게 받은 input 값을 가지고 무언가를 처리한다.

• action : input 값을 서버에게 전송하는 API 주소.
• method : 정보가 많거나 중요한 정보는 POST / 그 외에는 GET

---

◎input 태그

필드(입력창)을 생성할때, 사용자에게 정보나 데이터를 받을때. 

<input type = " text " >

(※ type 속성 필수, 닫는 태그가 없다)

 

<input type = "text"> 
한줄정도의 모든 텍스트를 받을 수있다.


<input type = "text" placeholder = " "> 
기본적으로 아무값이 없을대 input칸 안에 보여지는 텍스트.
( 값을 입력하지 않을때 안내창이뜸)


<input type = "text" maxlength = " "> 
input칸에 작성할 수 있는 텍스트의 갯수를 제한 하고 싶을때.


<input type = "text" minlength = " "> 
input칸에 작성할 수 있는 최소 문자갯수. 
(최소문자갯수보다 적을때 안내창이뜸)


<input type = "text" required = " "> 
input칸에 무조건 입력하게 하고 싶을때. 
(미입력시 반드시 입력하라는 안내창이뜸)


<input type = "text" disabled = " "> 
특정 input 값을 사용하지 않을때. 
input칸에 입력할 수 없게 막아두고 싶을때.


<input type = "text" value = " "> 
초기값 기본적으로 input 칸에 입력 되어있는 값.

---

◎input의 type 속성 종류 (1)

<input type = "email"> 
input칸에 이메일을 입력 받고 싶을때. 
이메일이 아닌 값을 입력하면 이메일을 입력하라는 안내문구가 뜸
(서버에 데이터를 보내기전에 미리 유효성 검사를 
할 수 있다는 장점이 있다)


<input type = "password"> 
input 칸에 입력한 값이 보이지 않게 할때.


<input type = "url주소"> 
input칸에 url값만 입력 할 수 있게 할때.


<input type = "number"> 
input칸에 text를 입력할 수 없음. 숫자만 입력하능하게 할때.
<input type = "number" max= "" min= ""> 
input칸에 입력되는 텍스트의 최대, 최소값 설정가능.


<input type = "file"> 
파일 첨부하는 input칸을 만들고 싶을때.
<input type = "file" accept =".jpg.png" > 
첨부.파일 확장자의 제한을 두고 싶을때

---

◎input의 type 종류 (2)

• radio : 여러가지 중 하나만 선택 가능.
• checkbox : 여러가지 항목 중 다중선택 가능.

<input type ="radio" name =" " value =" ">
- name : radio의 name을 동일하게 해줘야 그룹되어 여러가지중 하나만 선택할 수 있게한다.
- value : 서버가 값을 구분해서 전달 받기 위해서 반드시 명시!
 

<input type ="checkbox" name =" " value =" ">
- name : radio와 동일하게 그룹핑하기 위해서 같은값 명시.
- value : radio와 동일

 

 

---

◎label 태그

form양식에 이름을 달아줄때 사용.

<label></label>

 

속성 : for

• 라벨과 폼을 연결해주는 속성
• for 속성을 사용하기 위해 input 태그에 id 값이 있어야 한다.
• label을 눌렀을때 연결된 input 칸에 포커스가 된다.

<label for = "userTel">
   핸드폰 번호 
</label>
<input type = "tel" id = "userTel">