코딩(기초 입문)/HTML

HTML 폼 태그(form) - 2(요소 설명)

uiux4503 2024. 11. 12. 14:53
반응형
SMALL

1. input 태그
- 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용
- type에 따라 형식이 결정 (버튼, 이메일, 로그인 입력 등)

input 속성 설명
type - input 태그의 타입을 지정
placeholder - 태그에 입력할 값에 대한 힌트
required - 필수 입력 필드 지정(빈칸이면 안넘어감)
readonly - 읽기 전용 필드로 만듬
maxLength - 텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
autofocus - 페이지를 불러오자마자 특정 부분에 마우스 커서가 표시되도록 하는 것
autocomplete - 자동완성
max/min - 최대값과 최소값 지정
step - 숫자의 간격 설정
- input  type이 date,datetime,datetime-local,month,week,time,number,range경우만 사용가능		 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 형식</title>
</head>
<body>
   <form action="/test.html" method="get"> <!-- form 속성 사용할 때 -->
    <input type="text" name="id" placeholder="힌트 입력창"> <!-- 힌트 입력창 -->
    <input type="text" name="length" maxlength="5" required> <!-- 문자 작성 개수 지정 -->
    <input type="number" min="1" max="4"> <!-- 허용범위 최소/최대값 -->
    <input type="text" name="focous" autofocus> <!-- 특정마우스커서 -->
   </form> 
</body>
</html>

실행화면
작성 화면

 

 - 문자 작성 개수 지정은 최대 5개가 넘지 않음
- type을 숫자로 지정 후 허용범위를 걸어놓으면 넘지않음
- 처음 화면 로딩 시 input에서 focus 속성에 제일 먼저 커서가 잡혀있음

 

2. input type 속성 종류

input type 속성  설명
text - 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
email - 메일 주소 입력 필드
- @가 들어간 이메일 형식인지 검사
submit - 서버전송 버튼
number - 숫자를 조절 할 수 있는 화살표
password - 비밀번호 입력 필드
range - 숫자 범위를 조절할 수 있는 슬라이드 막대
- css로 커스텀마이징 가능 단, 브라우저마다 다르니 참조
checkbox - 체크박스 (2개 이상 선택 가능)
radio - 라디오 버튼 (1개만 선택 가능)
tel - 전화번호 입력 필드
url - URL 주소를 입력 필드
hidden - 서버로 보내는 값들을 보내는 필드 
- 사용자한테는 안보임
color - 색상표
date - 사용자 지역을 기준으로 한 날짜 (연, 월, 일)
month - 사용자 지역을 기준으로 한 날짜(연, 월)
week - 사용자 지역을 기준으로 한 날짜(연, 주)
time - 사용자 지역을 기준으로 한 시간(시, 분, 초, 분할 초)
datetime-local - 사용자 지역을 기준으로 한 날짜와 시간
button - 버튼을 만들어 클릭했을 때 이벤트 발생
file - 파일을 첨부할 수 있는 버튼
image - submit 서버전송 버튼
reset - 리셋 버튼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 형식</title>
</head>
<body>
   <form action="/test.html" method="get"> <!-- form 속성 사용할 때 -->
    <h3>button</h3>
    <input type="button" value="Click" onclick="alert('Hello world!')">
    <hr>
    
    <h3>checkbox</h3> <!-- 2개 이상 선택 가능 -->
    <input type="checkbox" name="fruit1" value="apple" checked>하나<br>
    <input type="checkbox" name="fruit2" value="grape"> 둘<br>
    <input type="checkbox" name="fruit3" value="peach"> 셋<br>
    <hr>
    
    <h3>color</h3> <!-- 색상표(컬러피커) -->
    <input type="color" name="mycolor">
    <hr>
    
    <h3>date</h3> <!-- 달력 -->
    <input type="date" name="date">
    <hr>
    
    <h3>datetime-local</h3>
    <input type="datetime-local" name="time">
    <hr>
    
    <h3>file</h3> <!-- 파일 선택 -->
    <input type="file" name="myfile">
    <hr>
    
    <h3>hidden</h3>
    <input type="hidden" name="country" value="Norway">
    hidden filed는 사용자에 표시되지 않는다.
    <hr>
    
    <h3>month</h3>
    <input type="month" name="birthdaymonth">
    <hr>
    
    <h3>number</h3>
    <input type="number" name="quantity" min="2" max="5" step="2" value="2">
    <hr>
    
    <h3>radio</h3> <!-- 1개만 선택 가능 -->
    <input type="radio" name="gender" value="male" checked> 1<br>
    <input type="radio" name="gender" value="female"> 2<br>
    <hr>
    
    <h3>range</h3>
    <input type="range" name="points" min="0" max="15" step="2" value="2">
    <hr>
    
    <h3>reset</h3>
    <input type="reset">
    <hr>
    
    <h3>search</h3>
    <input type="search" name="googlesearch" autocomplete="on" >
    <hr>
    
    <h3>submit</h3>
    <input type="submit" value="Submit">
    <hr>
 
    <h3>time</h3>
    <input type="time" name="mytime">
    <hr>
  
    <h3>week</h3>
    <input type="week" name="week_year">

   </form> 
</body>
</html>