form 태그와 관련된 태그 1 <input />

<input /> - 사용자에게 정보나 데이터를 받아올 입력창

 

🚨 Syntax alert🚨 

기본 attribute로 type을 작성해야 한다

<form action=" " method=" ">

  <!-- 한 줄 정도의 간단한 텍스트를 입력하는 경우 -->
  <input type="text" />
  
  <!-- 숫자를 입력하는 경우 -->
  <input type="number" /> 
  
  <!-- 비밀번호를 입력하는 경우 -->
  <input type="password" /> 
  
  <!-- 이메일을 입력하는 경우 -->
  <input type="email" />
  
  <!-- 전화번호를 입력하는 경우 -->
  <input type="tel" /> 
  
  <!-- 라디오 버튼을 만드는 경우 -->
  <input type="radio" /> 
  
  <!-- 기본 버튼을 만드는 경우 -->
  <input type="button" /> 
  
  <!-- 제출하는 버튼을 만드는 경우 -->
  <input type="submit" /> 
  
  <!-- 파일을 업로드하는 경우 -->
  <input type="file" /> 
  
  <!-- 그 외 -->
  <!-- checkbox, color, reset, search, url 등 -->
  
<form>

 

추가 attribute

placeholder="기본 안내 문구" : 기본적으로 안내 문구 제공

maxlength="15" : 입력 가능한 최대 문자 수

minlength="5" : 입력 가능한 최소 문자 수

required : 필수로 입력해야 하는 정보일 때 사용

disabled : 특정 인풋값을 사용하지 못하게 막아둘 때 사용

value="라이틱스" : 미리 입력이 되어있는 상태로 시작하고 싶을 때 사용

max="99" : 지정 가능한 최대값 <input type="number"> 에서 사용

min="5" : 지정 가능한 최대값 <input type="number"> 에서 사용

accept=".png, .jpg" : 파일의 확장자를 제한하고 싶을 때 사용 <input type="file"> 에서 사용

 

프론트엔드 지망생이 강의를 들으며 공부용으로 작성된 포스트이기 때문에 내용이 빈약할 수 있습니다 :)

잘못된 정보가 있으면 댓글 남겨주시면 감사하겠습니다.