HTML 형식요소 외 label, select, textarea, button, fieldset, legend, datalist, output

1. HTML 형식(forms)

형식 요소는 텍스트 영역, 체크박스, 버튼, 제출버튼 등과 같은 사용자가 입력하는 형식을 정의한다.

 

1-1. <form> 속성

 

형식 요소 자체에 포함되는 속성에 action, target, method등이 있다.

- action은 제출한 형식이 실행되도록 하는 것이고

  <form action="/action_page.php">

 

- target은 제출한 형식을 어떻게 보이도록 하는지 지정하는데, 새로운 브라우저에서 열거나(_blank) 지정된 영역 안에서 열거나, 현재 창에서 여는 방식이 있다.

  <form action="/action_page.php" target="_blank">

 

- method는 형식 요소에 입력값을 제출할 경우 get이나 post의 방법을 사용하는 것이다. post는 민감하거나 개인적인 정보를 제공하는 경우 주소에 형식 요소를 표시하지 않는 것이다. get은 기본값으로 형식 요소를 주소 안에 드러낸다. 

 

 

1-2. <input> 요소

 

가장 대표적인 형식 요소이며, type에 따라서 다르게 표시된다. type이 생략된 경우는 기본적으로 text이다.

<input type=" " id=" " name=" " value/max/min=" ">

 

type에 포함되는 것은 button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week 등이 있다.

 

 

- <input type="text">는 한 줄 값을 입력할 때 사용한다. 기본 값에 해당한다.

  <input type="text" id="fname" name="fname" value="John">

 

- <input type="radio">는 여러 선택지 중에서 하나만을 선택하도록 하는 '라디오 버튼'을 입력할 때 사용한다.

  <input type="radio" id="male" name="gender" value="male">

 

- <input type="submit">은 형식을 제출하는 버튼에 사용한다.

   <input type="submit" value="Submit">

 

그리고 반드시 name 속성을 포함해야 하고 그렇지 않으면 데이터가 표시되지 않는다.

<input type=" " name=" ">

 

 

1-3.<label> 요소

 

형식 요소를 위한 레이블을 정의한다. 화면을 보는 사람이 어떤 기입항목들이 있는지 알아보기 쉽도록 한다. 

<label for=" ">...</label>

 

 1-4. <select> 요소

 

화살표를 누르면 항목 리스트가 아래로 쫙 떨어지는 '드롭다운 리스트'를 생성한다. 드롭다운 리스트의 각 항목은 <select> 하위에 <option>태그로 설정한다. 또한 한 <option>태그 안에 selected 속성을 추가하면 그 항목이 화면에 처음 보이는 드롭다운 리스트로 생성되고, selected를 설정하지 않는다면 가장 처음에 설정한 <option>이 보인다.

 

<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

 

<select size="4" multiple>처럼 <select>안에 size="숫자"를 추가하면 바로 보이는 항목의 개수를 조절할 수 있다. size="3"을 한다면 세개의 항목이 보인다. 

 

 

1-5 <textarea>요소

 

여러 줄을 입력 가능한 영역을 지정한다. 10줄, 30열의 영역을 지정하고 싶다면 다음과 같이 작성할 수 있다.

<textarea name="message" rows="10" cols="30">

 

 

1-6. <button>요소

 

클릭 가능한 버튼을 지정한다. 버튼에 삽입할 문구를 < > < >사이에 넣어주면 된다.

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

 

1-7. <fieldset>-<legend> 요소

 

형식 내용이 서로 연관된 것들끼리 묶어주는 역할을 한다. 

 

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

 

1-8. <datalist> 요소

 

반드시 id 속성을 포함해야 한다. <select>요소가 객관식 느낌이라면, <datalist>는 주관식인데 객관식처럼 표시되는 것? 이라고 표현하면 되려나. 

 

 

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

 

 

1-9. <output> 요소

 

계산 결과값을 출력하는 요소이다. 

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

 

 

 

w3school