반응형
HTML Form
- 사용자 입력을 수집하기 위해 사용.
- 사용자 입력은 대부분 처리를 위해 서버로 전송
- Form에는 텍스트 필드, 체크박스, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소에 대한 컨테이너이다.
input 요소
| 유형 | 설명 |
| <input type="text"> | 텍스트 입력 필드를 표시합니다. |
| <input type="radio"> | 라디오 버튼을 표시합니다. (여러 선택 항목 중 하나 선택) |
| <input type="checkbox"> | 확인란을 표시합니다. (여러 선택 사항 중 0개 이상 선택) |
| <input type="submit"> | 제출 버튼을 표시합니다(양식 제출용). |
| <input type="button"> | 클릭 가능한 버튼을 표시합니다. |
input 태그 type 속성들을 알기 위한 실습 - inputs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>input 태그 type 속성들</h3>
<form>
<input type="button" value="아이디찾기"><br>
<input type="checkbox">동의<br>
<input type="color"><br>
<input type="date"><br>
<input type="datetime-local"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input type="image"><br>
<input type="month"><br>
<input type="radio" name = "gender">남자<input type = "radio" name = gender">여자<br>
<input type="range"><br>
<input type="reset"><br>
<input type="search"><br>
<input type="submit" value="회원가입"><br>
<input type="tel"><br>
<input type="time"><br>
<input type="url"><br>
<input type="week"><br>
</form>
</body>
</html>
input 태그 type 속성들
실습 코드 - form01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>아이디</label><br>
<input type="text" id = "userid"><br>
<label>비밀번호</label><br>
<input type="password"><br>
<input type = "submit" value = "로그인">
</form>
</body>
</html>
반응형
'FrontEnd > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS란, 외부 CSS와 내부 CSS 적용 방법 및 CSS 실습 (0) | 2024.01.04 |
|---|---|
| [HTML] Form 태그 (2) - 전화번호 입력, 회원정보 실습 (0) | 2024.01.04 |
| [HTML] Tables <table> 태그, Ifames 태그 이론 및 실습 (0) | 2024.01.04 |
| [HTML] Image/Image Map 이론 및 실습 (0) | 2024.01.04 |
| [HTML] Links <a> 링크 태그 이론 설명 및 실습 예제 (0) | 2024.01.04 |