[TIL] html tag 의 id attribute 는 유일해야한다.

form 을 제출하는 간단한 과제를 했는데 

너무 기본을 모르고있어서 반성하는 마음으로 .. 개념을 정리 해 본다.. ^_T

 

 

• button 태그의 type 속성의 default 는 submit이다.
• button submit과 input submit 은 기능적으로 동일하지만 button 은 자식요소를 가질 수 있어 다양한 스타일링이 가능하다.

id 는 전체 html 태그 중 유일한 값이어야한다.

 

form 제출 사용 예제

<form action="/action_page.php" method="get" id="form1">
	<label for="fname">First name:</label>
	<input type="text" id="fname" name="fname"><br><br>
	<label for="lname">Last name:</label>
	<input type="text" id="lname" name="lname">
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

 

form attribute 의 사용 정의

The form attribute specifies the form the button belongs to.

The value of this attribute must be equal to the id attribute of a <form> element in the same document.

 

form 어트리뷰트는 버튼이 어느 form 에 속하는지 정의해준다.

form 어트리뷰트의 값은 form 태그의 id값과 동일해야한다. 

 

id는 global attribute 이라서 모든 태그에 다 쓸 수 있음

form attribute 는

<button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>

해당 태그들에만 쓸 수 있다 ~ 

 

for attribute는 label 과 ouput태그에서 쓰는데 label이 어디에 속해있는지 정의해준다.

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

input 에 id를 주고 label에 for를 사용해 label과 연결시켜줄 수 있다. react 를 사용할때는 for이 예약어이기 때문에 htmlFor 를 사용해준다.

 

 

id 처럼 이름을 붙여주는거라고만 생각하고 있고 잘 몰랐던 ..... name 과 title 도 정리해보자 

 

name 은 button, textarea, select 등에서 html element의 이름을 구체적으로 명시해준다.

<form action="/action_page.php" method="get">
  Choose your favorite subject:
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>

<form action="/action_page.php" method="get" name="myForm">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="button" onclick="formSubmit()" value="Send form data!">
</form>

select 태그랑 같이 쓰면 될듯 .. 

 

 

title도 global attribute인데 이걸 작성해주면 tooltop text로 element에 정보가 나타난다.

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>

 

참조 

https://developer.mozilla.org/ko/docs/Web/HTML/Attributes

HTML 특성 참고서 - HTML: Hypertext Markup Language | MDN

https://www.w3schools.com/tags/att_button_form.asp

HTML button form Attribute