HTML 태그 - form 2 (form 태그 안에 사용하는 태그)

• <input> 가장 많이 사용하는 유형, 따로 게시!
• <label> 여러 양식 요소에 대한 레이블을 정의, 스크린 리더 사용 시 입력 요소에 포커스를 둘 때 라벨을 소리내어 읽어준다.
• <select> 드롭 다운 목록을 정의한다.

<form action="/action_page.php">
  <label for="fruit">Choose a fruit:</label>
  <select id="fruit" name="fruit">
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="peach">peach</option>
    <option value="melon">melon</option>
  </select>
  <input type="submit">
</form>

 

<select> 속성 값

selected  기본적으로 드롭다운 목록의 첫 번째 항목이 선택되는데, 위의 예시에서는 apple 이 기본값, 처음에 보여주는 값을 정의하려면 보여주고 싶은 항목에 selected속성을 추가하면 됩니다.

보여지는 화면

<form action="/action_page.php">
  <label for="fruit">Choose a fruit:</label>
  <select id="fruit" name="fruit">
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="peach" selected>peach</option>
    <option value="melon">melon</option>
  </select>
  <input type="submit">
</form>

size 표시되는 값의 수를 지정한다.

<form action="/action_page.php">
  <label for="fruit">Choose a fruit:</label>
  <select id="fruit" name="fruit" size="2">
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="peach">peach</option>
    <option value="melon">melon</option>
  </select>
  <input type="submit">
</form>

 

• <textarea> 여러 줄 입력 필드(텍스트 영역)를 말한다.

<form action="/action_page.php">
  <textarea name="message" rows="10" cols="30">우리집 강아지와 고양이는 서로 사이가 좋다.</textarea>
  <br><br>
  <input type="submit">
</form>

 

• <button> 클릭 가능한 버튼을 만든다.

<button type="button">버튼만들기</button>

 

 

 

• <fieldset> 관련 데이터를 양식으로 묶어 주는 선으로 표현된다. 예) 이름 지정하기 옆으로 묶인 테두리
• <legend> fieldset으로 묶은 데이터에 이름을 붙일 수 있다. 예) 이름 지정하기

<form action="/action_page.php">
  <fieldset>
    <legend>이름 지정하기</legend>
    <label for="fname">성:</label><br>
    <input type="text" id="fname" name="fname" value="김"><br>
    <label for="lname">이름:</label><br>
    <input type="text" id="lname" name="lname" value="미라"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>