![[HTML] form 입력 양식 태그 & input 태그](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDbnT8%2FbtroStrrXLq%2FbKRqTkF7B2t2EBFgdPVO0K%2Fimg.png)
예시 1
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
</html>
예시 2
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<form>
<input type="text" name="name" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
</html>
예시 3
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<form>
<input type="text" /><br />
<input type="button" /><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<input type="hidden" /><br />
<input type="image" /><br />
<input type="password" /><br />
<input type="radio" /><br />
<input type="reset" /><br />
<input type="submit" />
</form>
</body>
</html>
예시 4
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<form>
<label>이름</label>
<input type="text" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<form>
<label for="name">이름</label>
<input id="name" type="text" />
</form>
</body>
</html>
예시 5
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
</head>
<body>
<form>
<input type="color" /><br />
<input type="date" /><br />
<input type="datetime" /><br />
<input type="datetime-local" /><br />
<input type="email" /><br />
<input type="month" /><br />
<input type="number" /><br />
<input type="range" /><br />
<input type="search" /><br />
<input type="tel" /><br />
<input type="time" /><br />
<input type="url" /><br />
<input type="week" />
</form>
</body>
</html>
form 입력 양식 태그
사용자에게 입력받는 공간.
<form> 입력 양식 태그
<action> 입력 데이터의 전달 위치 지정
<method> 입력 데이터의 전달 방식 선택
input 태그
<button> 버튼 생성
<checkbox> 체크박스 생성
<file> 파일 입력 양식 생성
<hidden> 노출되지 않도록 해줌
<image> 이미지 형태 생성
<password> 비밀번호 입력 양식 생성
<radio> 라디오 버튼 생성
<reset> 초기화 버튼 생성
<submit> 제출 버튼 생성
<text> 글자 입력 양식 생성
label 태그
<label> 태그는 어떤 input 태그를 설명하고 있는지 표시해줘야 한다.
HTML5에서 추가된 input 태그
<color> 색상 선택 양식
<date> 일 선택 양식
<datetime> 날짜 선택 양식
<datetime-local> 지역 날짜 선택 양식
<email> 이메일 입력 양식
<month> 월 선택 양식
<number> 숫자 생성 양식
<range> 범위 선택 양식
<search> 검색어 입력 양식
<tel> 전화번호 입력 양식
<time> 시간 선택 양식
<url> url 주소 입력 양식
<week> 주 선택 양식
'HTML > Day36' 카테고리의 다른 글
| [HTML] fieldset 태그 & legend 태그 (0) | 2021.12.26 |
|---|---|
| [HTML] textarea 태그 & select 태그 (2) | 2021.12.25 |
| [HTML] video 비디오 태그 (0) | 2021.12.25 |
| [HTML] audio 오디오 태그 (0) | 2021.12.25 |
| [HTML] img 이미지 태그 (0) | 2021.12.25 |