HTML은 여러가지 입력 가능한 태그를 제공한다.
이런 태그를 서로 조합하면, 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있다.
그리고, 서버는 그런 데이터를 조작해서 생산성있고, 상호작용이 가능한 무언가를 만들 수 있을 것이다.
📝 <button>
클릭 가능한 버튼을 담당한다.
버튼은 양식 내부는 물론, 간단한 표준 버튼 기능이 필요하면 어디든 배치할 수 있다.
📢 예시
<button name="button">눌러보세요</button>🔊 결과
📌 필요시 추가정보
HTML 요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호
developer.mozilla.org
📝 <form>
정보를 제출하기 위한 대화형 컨드롤을 포함하는 문서 구획을 담당한다.
📢 예시
<!-- Form which will send a GET request to the current URL -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form which will send a POST request to the current URL -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form with fieldset, legend, and label -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>🔊 결과
📌 필요시 추가정보
📝 <input> 태그
웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨들롤을 담당한다.
사용자에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다.
입력 유형과 특성의 다양한 조합 가능성으로 인해, <imput>요소는 가장 강력하면서도 복잡한 태그 중 하나다.
<input> 태그는 속성 및 옵션이 정말 많으니, 필요시 참고문서를 꼭 확인하자.
📢 예시
<!-- A basic input -->
<input type="text" name="input" value="Type here"><!-- A common form that includes input tags -->
<form action="getform.php" method="get">
<label>First name: <input type="text" name="first_name" /></label><br />
<label>Last name: <input type="text" name="last_name" /></label><br />
<label>E-mail: <input type="email" name="user_email" /></label><br />
<input type="submit" value="Submit" />
</form>🔊 결과
📌 필요시 추가정보
: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형
developer.mozilla.org
📝 <textarea> 태그
멀티라인 일반텍스트 편집 컨트롤을 담당한다.
📢 예제
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>🔊 결과
📌 필요시 추가정보
💡 마무리
이 외에도..
<datalist> : 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담는다.
<label> : 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
<fieldset> : 웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용합니다.
등등 몇 가지 더 많은 HTML 양식 태그들이 존재하니 필요시 관련 문서를 참고하자.
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순
developer.mozilla.org
'WEB' 카테고리의 다른 글
| [React] JSX 문법 및 렌더링 (0) | 2021.02.06 |
|---|---|
| [React] 개요 & JS와 차이점 (0) | 2021.02.03 |
| [JS] DOM,Event,Node객체 (0) | 2021.02.03 |
| [HTML] 시맨틱 태그 정리 (0) | 2021.02.02 |
| [HTML] HTML 기본 태그 정리 (0) | 2021.02.02 |
