html-8: 사용자에게 정보 입력받기-2

사용자에게 정보 입력받기 -2

속성	설명	비고
placeholder	빈 칸에 보이는 안내문
maxlength	최대 길이
minlength	최소 길이	위반시 submit이 거부됨

텍스트 관련 인풋 타입

  <form action="#">
    <label for="txtIp">text</label> <br>
    <input 
      id="txtIp"
      type="text"
      placeholder="5자 이하"
      maxlength="5"
    >
    <br><br>
    <label for="pwdIp">password</label> <br>
    <input
      id="pwdIp"
      type="password"
      placeholder="4자 이상"
      minlength="4"
    >
  </form>

* text, paswword, tel, submit …

---

___

숫자관련 인풋타입

속성	설명	비고
min	최소값	date 등 타입마다 형식 다름
max	최대값	date 등 타입마다 형식 다름
step	간격

  <form action="#">
    <label for="numIp">number</label> <br>
    <input 
      id="numIp"
      type="number"
      min="0"
      max="10"
    >

    <label for="rgIp">range</label> <br>
    <input
      id="rgIp"
      type="range"
      min="0"
      max="100"
      step="20"
    >

    <label for="dtIp">date</label> <br>
    <input
      id="dtIp"
      type="date"
      min="2020-01-01"
      max="2030-12-31"
    >


  </form>

---

___

체크 관련 인풋 속성들

속성	타입	설명
checked	체크박스 & 라디오	체크됨 여부
name	라디오 (다른 타입들에서도 사용)	옵션들의 그룹으로 사용됨
value	라디오 (다른 타입들에서도 사용)	각 옵션마다 실제로 넘겨질 값

  <form action="#">
 
   <h2>checkbox</h2>
 
   <input 
 
    id="cbIp"
 
    type="checkbox"
 
    checked
 
   \>
 
   <label for="cbIp">유기농</label> <br>
  
 
   <h2>radio</h2>
 
   <input
 
    type="radio"
 
    name="fruit"
 
    id="f_apple"
 
    value="apple"
 
    checked
 
   \>
 
   <label for="f_apple">사과</label>
 
   <input
 
    type="radio"
 
    name="fruit"
 
    id="f_grape"
 
    value="grape"
 
   \>
 
   <label for="f_grape">포도</label>
 
   <input
 
    type="radio"
 
    name="fruit"
 
    id="f_orange"
 
    value="orange"
 
   \>
 
   <label for="f_orange">오렌지</label>
 
  
  </form>