[HTML] HTML 양식 태그 정리

HTML은 여러가지 입력 가능한 태그를 제공한다.

이런 태그를 서로 조합하면, 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있다.

그리고, 서버는 그런 데이터를 조작해서 생산성있고, 상호작용이 가능한 무언가를 만들 수 있을 것이다.

---

📝 <button>

클릭 가능한 버튼을 담당한다.
버튼은 양식 내부는 물론, 간단한 표준 버튼 기능이 필요하면 어디든 배치할 수 있다.

📢 예시

<button name="button">눌러보세요</button>

🔊 결과

📌 필요시 추가정보

---

📝 <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>

🔊 결과

Name:

Name:

Title

Select me

📌 필요시 추가정보

 

---

📝 <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>

🔊 결과

First name:
Last name:
E-mail:

📌 필요시 추가정보

: 입력 요소 - HTML: Hypertext Markup Language | MDN

---

📝 <textarea> 태그

멀티라인 일반텍스트 편집 컨트롤을 담당한다.

📢 예제

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

🔊 결과

Write something here

📌 필요시 추가정보

---

💡 마무리

이 외에도..

<datalist> :  다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담는다.
<label> :  웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
<fieldset> :  웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용합니다.

등등 몇 가지 더 많은 HTML 양식 태그들이 존재하니 필요시 관련 문서를 참고하자.

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN