[HTML] input tag 타입

Input tag

:여러가지 다양한 기능에 사용

• 사용자에게 정보를 입력받는 경우 사용
•  type 속성에 따라 여러기능으로 사용
• 보통 <form>태그와 함께 사용

<input type = "속성명">

 

input type = "text"

• 가장 많이 사용
• 영문, 한글, 특수문자 등의 문자를 입력할 때 사용
• placeholder : 미리보기처럼 흐리게 표시
•  readonly : 읽기 전용 (변경불가능)
•  required : 필수 작성
•  class = "" 속성을 같이 쓰는 경우 : 같은 스타일을 적용

ID : <input type="text">
PASSWORD : <input type="text" placeholder="비밀번호">

 

input type = "button"

• 3가지 형식으로 지원   
  • "button" : 기본형
  • "submit" : 전송버튼, 서버로 전송하세요 (로그인,회원가입)
  • "reset" : 취소버튼

<form action="">
       <input type="text">
       <input type="text">
       <input type="button" value="버튼">
       <input type="submit" value="submit">
       <input type="reset" value="reset">
</form>

 

input type = "password"

• 비밀번호에 사용
• 값을 넣으면 *로 표현

<input type="password">

 

input type = "checkbox" 

: 다중선택

• submit : 전송하기
  • 페이지 주소 : http://127.0.0.1:5500/day01/03_input.html? fruit=apple&fruit=orange&fruit=banana 
  • 사과, 오렌지, 바나나를 선택해 버튼을 누르면 name인 fruit에 담아 전송
• lable for : 같이 세트로 묶기 + 체크박스 앞에 글 위치
  • 이름 (apple, banana등)을 눌러도 체크 박스에 표시
  • lable for =" a " 와 id = " a " 가 동일해야함
  • input은 label태그 뒤, 중간 상관없이 삽입 가능
• name : 보내는 이름 값

<input type="checkbox">
    <input type="radio">
    <form action="">
        <p>좋아하는 과일은? (복수가능) </p>
        <input type="checkbox" name="fruit" value="apple"> 사과
        <input type="checkbox" name="fruit" value="orange"> 오렌지
        <input type="checkbox" name="fruit" value="banana"> 바나나  
        <input type="submit" value="전송">
    </form>
    
<form action="">
    <p>좋아하는 과일은? </p>
    <label for="apple">사과</label> 
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="orange">오렌지
      <input type="checkbox" name="fruit" value="orange" id="orange">
    </label>
    <label for="banana">바나나</label>
    <input type="checkbox" name="fruit" value="banana" id="banana">
	<input type="submit" value="전송">
</form>

 

 

 input type = "radio" 

: 하나 선택

• name을 같게 사용하여 = 하나의 묶음 중 하나선택
• lable for =" a " 와 id = " a " 을 동일하게 적용
• name = 보내지는 값

<form action="">
        <label for="on">on</label>
        <input type="radio" name="switch" value="on" id="on">
        <label for="off">off</label>
        <input type="radio" name="switch" value="off" id="off">
        <input type="submit" value="전송">
    </form>

 

input type = "color"

• rgb로 색상 선택이 가능 
• 색상정보를 16진수로 표현

<form action="">
        <input type="color" name="color">
        <input type="submit" value="전송">
</form>

 

input type = 날짜

• type = "month" : 년 월     
• type = "week" : 년 주      
• type = "date" : 년 월 일      
•  type = "datetime-local" : 년 월 일 시 분 초        
• type = "time" : 시 분 초 
         
• 실무에서는 jqurey에서 제공하는 datepicker / 부트스트랩에서 제공하는 datepiker을 사용함

<form action="">
        <input type="month">
        <input type="week">
        <input type="date">
        <input type="datetime-local">
        <input type="time">
</form>

 

input type = "email" /   input type = "url"

• type = "email" : 이메일 형식인지 확인 (@ 사용해야함)
• type = "url" : url 형식인지 확인 (http 사용해야함)

 <form action="">
        <input type="email" name="email" id="">
        <input type="url" name="url" id="">
        <input type="submit" name="" id="" value="전송"> 
</form>

 

 

input type = "file"

: 첨부파일 선택

<form action="">
        <input type="file" name="" id="">
</form>

 

input type = "hidden"

: 숨김속성

• 값을 안보이게 숨김
• 실제 백앤드에서 많이 사용

<form action="">
        <input type="hidden" name="" id="" value="숨김속성">
</form>

 

 

input type = "image"

• type = "image" : img태그와 동일 (이미지추가역할) 
• src = "이미지의 주소"
  
  1. src = "인터넷 이미지 주소" 
  2. src = "/파일명/이미지이름"
• alt : 이미지가 없을 경우 보여지는 문자

<form action="">
        <input type="image" src="인터넷 사진의 주소">
        <input type="image" src="/image/냥3.jpg" alt="고양이사진">
</form>

 

 

input type = "number"

: 숫자만 입력이 가능한 타입

• 위/아래로 숫자 더하기/빼기 가능
• 수량선택에 자주 사용

<form action="">
        <input type="number">
</form>

 

 

input type = "range"

: 상태바

<form action="">
        1 <input type="range"> 10
</form>