[HTML] < input > 태그의 속성 & type의 속성값

[ <input> </input> 태그] 

- 사용자가 입력하는 부분은 거의 <input> 태그를 이용해 처리

- 입력하는 내용의 종류는 <input> 태그의 type 속성을 통해 지정

 

<input> 태그의 [ id 속성 ]

 

- 여러 번 사용된 폼 요소를 구분하기 위해 사용 ➡️ id 값은 중복될 수 없음

- <label> 태그를 이용해 캡션을 붙일 수 있음

- css를 이용해 각 요소마다 다른 형태로 꾸밀 수 있음

 

<Input> 태그의 type 속성에 들어갈 수 있는 [ 속성 값 ]

📌 type = "hidden"

- 화면 상의 폼에는 보이지 않음

- 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰을 서버에 보낼 때 사용됨

ex )

<input type="hidden" name="Token" value="xm234jq">

 

---

📌 type = "password"

- 비밀번호를 입력받을 때

- 사용자가 입력하는 내용이 " * " or "•"로 표시됨

 

비밀번호 : <input type="password" name="user_pw"><br>

---

📌 type = "text"

- 한 줄짜리 텍스트를 입력받을 때 

- 주로 아이디나 이름, 주소 등 텍스트 입력

 

아이디 : <input type="text" name="user_id"><br>

    🔎 text와 password 속성

          ✔️ name - 텍스트 필드를 구별할 수 있도록 이름 설정

          ✔️  size - 텍스트 필드의 길이 지정 

          ✔️ value (text 만) - 텍스트 필드 부분에 표시될 내용 / 이 속성을 사용하지 않으면 빈 텍스트 표시

          ✔️  maxlength - 텍스트 필드에 입력할 수 있는 최대 문자 개수 지정

     

🖍 maxlength가 10인데 size가 5라면 문자를 10까지 쓸 수 있지만 화면상에는 5개밖에 보이지 않음

 

---

📌 type = "search"

- 검색 필드

- 반드시 name 속성을 설정해 줘야 한다

- x 표시가 되어 검색어 삭제가 쉬움

검색 : <input type="search" name="q">

---

📌 type = "email"

- 메일 주소 입력 필드 / 메일 주소 형식 자동 체크

이메일 형식으로 쓰지 않으면 이렇게 문구가 뜸

 메일 주소 : <input type="email" id= "mail"><br>

---

📌 type = "url"

- 웹 주소 필드 / 유효한 URL 주소인지 여부를 자동으로 검증

url 형식으로 쓰지 않으면 위와 같은 문구가 뜸

블로그/홈페이지 : <input type="url" id="homep"><br>

---

📌 type = "tel"

- 전화번호 입력 필드

연락처 : <input type="tel" id= "phone"><br>

---

📌 type = "number"

- 숫자 입력 필드 / 속성 값을 통해 범위 제한 가능

- 브라우저에 따라 스핀 박스로 표시됨 

 

1부터 20까지의 짝수 : <input type="number" name="even" min="2" max="20" step="2"><br>

---

📌 type = "range"

- 슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드

- 속성 값을 통해 범위 제한 가능

 

            나이대를 골라보세요 : <br>
            <input type="range" id="a" name="ages" min="10" max="60" step="10">

🔎  range &number 속성

          ✔️max - 요소의 최댓값

          ✔️min - 요소의 최솟값

          ✔️step - 요소에 입력할 수 있는 숫자 사이의 간격

          ✔️value - 요소의 초깃값 명시

---

📌 type = "radio"

- 여러 항목 중 하나만 선택할 때

<label><input type="radio" name="subject" value="speaking">회화</label>
<label><input type="radio" name="subject" value="grammar">문법</label>
<label><input type="radio" name="subject" value="writing">작문</label>

 

---

📌 type = "checkbox"

- 여러 항목 중 둘 이상을 선택할 때

<label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
<label><input type="checkbox" name="mailing2" value="dialog">5분 회화 </label> 
<label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>

---

📌 type = "color"

- 색상 표에서 색상 선택

- value로 초기값 설정 가능 (value 설정하지 않을 시 value = "#000000"

- 해시 문자로 시작하는 7자리 16진수 값이 와야 함

 

            좋아하는 색을 골라보세요 : <br>
            <input type="color" name="mycolor" ><br>

---

📌 type = "date" 🔗  type = "month" 🔗 type = "week"

- 달력을 이용해 날짜 입력

- 브라우저마다 지원하거나 지원하지 않지만 safari에서는 지원을 하지 않아 text창과 동일하게 뜸

---

📌 type = "time" 🔗  type = "datetime-local" 

- 시간을 입력

- 브라우저마다 지원하거나 지원하지 않지만 safari에서는 지원을 하지 않아 text창과 동일하게 뜸

---

📌 type = "submit" 🔗  type = "reset"

- 폼 전송/리셋 버튼

- submit : 사용자 입력 내용을 서버로 전송

- reset : 사용자 입력 내용 전부 삭제

- value 속성을 이용해 버튼 표시 내용 지정 가능

 

            <input type="submit" value="submit">
            <input type="reset" value="reset">

 

---

📌 type = "image"

-submit 버튼 대신 이미지 삽입

---

<Input> 태그의 여러 가지 [ 속성 ]

📌 required

- 필수 필드 체크

- 속성 값 없이 입력해도 됨 ( required = "required" or required)

- 오류 메시지는 브라우저마다 다르게 나타남

📌 autofocus

- 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시

📌 placeholder

- 입력 란에 표시하는 힌트 / 필드를 클릭하면 사라짐

placeholder="아이디를 입력하세요"

📌 readonly

- 내용을 보기만 하고 입력하지 못하게 함

- 속성 값 없이 입력해도 됨 

---