[html] [css] <input>, <label>

label과 input 연결하기

코드

  <div>
    <label for="firstName">First name</label>
    <input id="firstName" type="text" 
    	placeholder="First name" required />
  </div>
  

<label>의 for 속성에 <input>의 id를 넣어주면 해당 input과 연결된다.
그럼 <label>만 클릭해도 <input>을 클릭한 것과 동일한 효과를 낸다.

결과물

---

비밀번호 최소 10글자 이상 입력하기

minlength 속성 대신 pattern 이용하기 -> minlength보다 지원하는 브라우저가 더 많음.

형식

pattern=".{최소글자수, 최대글자수}"

제약을 걸고 싶지 않은 옵션은 비워두어도 됨.
예를 들어 최소 10글자 이상, 최대글자수는 제한없음으로 하고 싶으면 아래와 같이 작성.

<input pattern=".{10, }" type="password" ...>

---

range타입 input에 눈금 표시하기

코드

repl.it

    <label for="happy">How happy are you?</label>
    <input id="happy" type="range" 
           list="marks" 
           min="0" max="100" value="50" step="10"
           required />
    <datalist id="marks">
      <option value="0"></option>
      <option value="10"></option>
      <option value="20"></option>
      <option value="30"></option>
      <option value="40"></option>
      <option value="50"></option>
      <option value="60"></option>
      <option value="70"></option>
      <option value="80"></option>
      <option value="90"></option>
      <option value="100"></option>
    </datalist>

결과물

---

미래의 나를 위해 남김.