최대 1 분 소요

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

파일 인풋 속성들

속성 설명 참조
accept 받아들일 수 있는 파일 형식  
multiple 여러 파일 업로드 가능 여부  
  <form action="#">
    <label for="fileIp">file</label> <br>
    <input 
      id="fileIp"
      type="file"
      accept="image/png, image/jpeg"
      multiple
    >
    <br><br>


    <label for="hdnIp">hidden</label> <br>
    <input
      id="hdnIp"
      type="hidden"
    >
  </form>


  <br><hr><br>


  <form action="#">
    <label for="emlIp">email</label> <br>
    <input 
      id="emlIp"
      type="email"
    >
    <br><br>


    <button type="submit">제출</button>
  </form>

정보입력-6

인풋요소(대부분 공통)

 <h1>인풋 요소 공통(대부분) 속성</h1>

  <form action="#">
    <label for="valIp">value</label> <br>
    <input 
      id="valIp"
      type="text"
      value="지정됨"
    >
    <br><br>

    <label for="afIp">autofocus</label> <br>
    <input 
      id="afIp"
      type="text"
      placeholder="자동 포커스됨"
      autofocus
    >
    <br><br>

    <label for="roIp">readonly</label> <br>
    <input 
      id="roIp"
      type="text"
      value="읽기만 가능, 전송됨"
      readonly
    >
    <br><br>

    <label for="rqIp">required</label> <br>
    <input 
      id="rqIp"
      type="text"
      placeholder="필수입력!"
      required
    >
    <br><br>

    <label for="daIp">disabled</label> <br>
    <input 
      id="daIp"
      type="text"
      placeholder="입력불가, 전송 안됨"
      disabled
    >
    <br><br>
    <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"
      disabled
    >
    <label for="f_orange">오렌지(품절)</label>
    <br>

    <br><br>

    <button type="submit">제출</button>
  </form>

정보입력-7

속성 설명
Value 기본값으로 지정되어있는 값
Autofocus 첫화면에 바로(기본적으로)커서가 되어있음
Readonly 읽기만 가능. 전송됨
Required 필수입력해야하는 부분! 입력안하면 제출안됨
Disable 입력불가. 전송 안됨

댓글남기기