HTML CSS

[HTML] Form (1)

쿠릉쿠릉 쾅쾅 2021. 8. 20. 20:51
728x90
<!-- ex.1 -->
<form action="" method ="GET">    
    <input type ="file" placeholder = "입력하세요" accept = ".png" />
</form>

 

<orm> 태그

  • 사용자로부터 인풋(input) 을 받기 위한 태그
  • action, method 속성을 반드시 적어야함
  • action = "API"
  • method = "GET" , method = "POST"

 

input 태그

  • type 을 반드시 적어야함
  • value 속성을 적어야함

 

 

text 타입

  • type = "text"
  • 최대 글자 수 설정 : maxlength 속성
  • 최소 글자 수 설정 : minlength 속성
  • 글자 입력전에 텍스트 칸에 글자 표시 : placeholder
속성명 설명
maxlength ="" 최대 글자 수 설정
minlength = "" 최소 글자 수 설정
placeholder = "" 글 자 입력전에 텍스트 칸에 글자 표시
required 필수 요소 지정
disabled 값 입력을 못하게 막음
value = "" 초기 기본값

 

<!-- text -->
<!-- ex.1 -->
<form action="" method ="GET">    
    <input type ="text" placeholder = "입력하세요" minlength="5" maxlength ="13" value = "안녕" rquired />
</form>


<!-- ex.2 -->
<form action="" method ="GET">    
    <input type ="text" placeholder = "입력하세요" minlength="5" maxlength ="13" disabled />
</form>

 

email 타입

  • type = "email"
<!-- ex.1 -->
<form action="" method ="GET">    
    <input type ="email" placeholder = "이메일을 입력하세요" />
</form>

 

password 타입

  • 글씨가 비밀번호 입력한것처럼 안보임
<!-- ex.1 -->
<form action="" method ="GET">    
    <input type ="password" placeholder = "입력하세요" minlength="5" />
</form>

 

url 타입

  • ㅇㅇㅇ
<!-- ex.1 -->
<form action="" method ="GET">    
    <input type ="url" placeholder = "url을 적으시오"/>
</form>

 

 

number 타입

속성 설명
min 최소값
maz 최대값

 

<!-- ex.1 -->
<form action="" method ="GET">    
    <input type ="number" placeholder = "나이를 입력하세요" min ="12" max="80" />
</form>

 

 

 

file 타입

속성 설명
accept ="" 허용하고자 하는 파일 이름의 확장자 명 정하기

 

<!-- ex.1 -->
<form action="" method ="GET">    
    <input type ="file" placeholder = "입력하세요" accept = ".png" />
</form>
728x90