| form | 사용자에게 입력 받을 항목을 정의한다. form tag 내부에 여러 개의 control 요소를 포함한다. |
| input | 텍스트 박스, 체크박스, 라디오 버튼 등 사용자가 데이터를 입력할 수 있도록 한다. |
| textarea | 여러 줄의 문자를 입력할 수 있도록 한다. |
| button | 버튼 |
| select | select box (dropdown ,combo box)표시 |
| optgroup | select box의 각 항목들을 그룹화한다. |
| option | selectbox의 각 항목들을 정의한다. |
| label | 마우스를 이용해서 input 항목을 선택 시 편리함을 제공한다. for 속성을 이용하여 다른 control 요소와 텍스트를 연결시켜서 더 편리하게 선택할 수 있도록 한다. |
| fieldset | 입력항목들을 그룹화 |
| legend | fieldset 제목 지정 |
| mtehod | 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다 . GET, POST방식이 있다. |
| name | form의 이름을 지정한다. |
| action | form 태그 안으 ㅣ내용들을 처리해 줄 서버상의 프로그램을 지정한다. |
| target | action 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 |
| autocomplete | 자동완성 기능 |
간단한 입력양식만들기-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="text">
<input type="submit">
</form>
</body>
</html>
로그인 입력 양식 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
아이디 :<input type="text"><br>
비밀번호 : <input type="password"><br>
<input type="submit">
</form>
</body>
</html>
| button | 버튼 생성 |
| checkbox | 체크박스 생성 |
| file | 파일 입력 양식 생성 |
| hidden | 보이지 않도록 하기 |
| image | 이미지 형태 생성 |
| password | 비밀번호 입력양식 생성 |
| radio | 라디오 버튼 생성 |
| reset | 초기화 버튼 생성 |
| submit | 제출 버튼 생성 |
| text | 글자 입력 양식 생성 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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"><br>
</form>
</body>
</html>
| color | 색상 선택 양식 지정 |
| date | 일 선택 양식 지원 |
| datetime | 날짜 선택 양식 지원 |
| datetime-local | 지역 날짜 선택 |
| 이메일 입력 양식 | |
| month | 달 선택 얄식 |
| number | 숫자 생성 양식 |
| range | 범위 선택 양식 |
| search | 검색어 입력 양식 |
| tel | 전화번호 입력 양식 |
| time | 시간 선택 양식 |
| url | URL주소 입력 양식 |
| week | 주 선택 양식 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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"><br>
</form>
</body>
</html>'Web > HTML 기본 개념' 카테고리의 다른 글
| select 태그를 통해서 여러 데이터 나열하기 (0) | 2021.03.05 |
|---|---|
| [HTML]이미지, 오디오 , 비디오 삽입하기 (0) | 2021.03.05 |
| [HTML]테이블 열,행 합치기 (0) | 2021.03.05 |
| [HTML]테이블 태그 (0) | 2021.03.05 |
| [HTML]글자 태그(2) (0) | 2021.03.02 |
