HTML

18. HTML Input /select/textarea/button

하둉이 2019. 1. 24. 23:29
반응형

* HTML 양식 요소 *



* <input> 요소 *

: type 속성에 따라 여러 가지 방법으로 표시 할 수 


<input name="firstname" type="text">




* <select> 요소 *

: 드롭 다운 목록을 정의합니다.


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




- <option> 요소 : 기본적으로 드롭 다운 목록의 첫 번째 항목이 선택됩니다. 

  미리 선택된 옵션을 정의하려면 selected 를 추가합니다.


<option value="fiat" selected>Fiat</option>



- size 표시 값 : 사용 size 표시 값의 수를 지정하는 속성


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





* <textarea> 요소 *

: 여러 줄 입력 필드를 정의합니다.

  rows 속성은 텍스트 영역의 행 수를 지정합니다.

  cols 속성은 텍스트 영역의 폭을 지정합니다.


<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>



* <button> 요소 *

: 클릭 할 수 있는 단추를 정의합니다.


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

// 버튼 클릭 시 Hello World! 가 적혀있는 창을 띄어 알려준다.




반응형