HTML 요소
요소관련 DOM 인터페이스설명
| <button> | HTMLButtonElement (en-US) | button 요소는 클릭할 수 있는 버튼을 나타낸다. |
| <datalist> | HTMLDataListElement (en-US) | datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 <option> 요소의 집합을 포함합니다. |
| <fieldset> | HTMLFieldSetElement (en-US) | fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다. |
| <form> | HTMLFormElement | form 요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다. |
| <input> | HTMLInputElement (en-US) | input 요소는 대화형 컨트롤 폼들을 생성하는데 사용됩니다. |
| <keygen> | HTMLKeygenElement (en-US) | keygen 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다. |
| <label> | HTMLLabelElement (en-US) | label 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다. |
| <legend> | HTMLLegendElement (en-US) | legend 요소는 상위 요소인 <fieldset> 컨텐츠를 위한 캡션을 나타냅니다. |
| <meter> | HTMLMeterElement (en-US) | meter 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다. |
| <optgroup> | HTMLOptGroupElement (en-US) | optgroup 요소는 <select> 요소 안에 있는 옵션 그룹을 생성합니다. |
| <option> | HTMLOptionElement | HTML option 요소는 <select>, <optgroup> 또는 <datalist>요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다. |
| <output> | HTMLOutputElement (en-US) | output 요소는 계산 결과를 나타냅니다. |
| <progress> | HTMLProgressElement (en-US) | progress 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다. |
| <select> | HTMLSelectElement | select 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. |
| <textarea> | HTMLTextAreaElement (en-US) | textarea 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다. |
1. Form 태그
HTML <form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>
<!DOCTYPE html>
<html lang="en">
<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>Form태그</title>
<style>
button{
cursor:pointer;
}
</style>
</head>
<button>버튼</button>
<h4>input</h4>
<div><input type="text"></div>
<div>
<p>우리집 애완동물을 선택하세요</p>
<input type="checkbox"> 강아지
<input type="checkbox"> 염소
<input type="checkbox"> 코끼리
</div>
<div>
<p>여름휴가로 가고 싶은 곳은?</p>
<input type="radio" name="vacation"> 오키나와
<input type="radio" name="vacation"> 남극
<input type="radio" name="vacation"> 라스베이거스
</div>
<div><input type="file"></div>
<div><input type="password"></div>
<div><input type="date"></div>
<div><input type="month"></div>
<div><input type="submit"></div>
<div><input type="image" src=""></div>
<div><button>제출</button></div>
</body>
</html>
반응형
'STUDY > 멀티미디어콘텐츠과정' 카테고리의 다른 글
| #14 CSS 레이아웃 (0) | 2021.12.21 |
|---|---|
| #13 table 요소 및 css 적용 (0) | 2021.12.16 |
| #11 스마트문화앱 콘텐츠 설계 (0) | 2021.12.15 |
| #10 블럭 요소와 인라인 요소 (0) | 2021.12.10 |
| #9 블럭요소와 인라인 요소의 개념 정리 (0) | 2021.12.09 |
댓글