HTML Form Elements

Ang kabanata na ito ay naglalarawan ng lahat ng HTML form element.

Ang elementong <input>

Ang pinakamahalagang form element ay ang elementong <input>. <input> element

Ang elementong <input> ay magiging iba't ibang paraan sa bawat iba't ibang type. type Ang attribute, ay maaaring magbabago ng mga paraan.

注释：Ang susunod na kabanata ay magtuturo ng lahat ng HTML input type.

Ang elementong <select> (dropdown list)

<select> Ang elementong <select> ay naglalagay ng ilang opsyon na maaaring pinili.Dropdown List：

实例

<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> Ang elementong <option> ay naglalagay ng mga opsyon na maaaring pinili.

Ang listahan ay karaniwang ipapakita ang unang opsyon bilang naipili.

Maaari mong idedefinir ang predefined na opsyon sa pamamagitan ng pagdagdag ng attribute na selected.

实例

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

亲自试一试

Ang elementong <textarea>

<textarea> Ang elementong <textarea> ay naglalagay ng ilang linya ng input field.Tekst Area）：

实例

<textarea name="message" rows="10" cols="30">
Ang pusa ay naglalaro sa hardin.
</textarea>

亲自试一试

以上 HTML 代码在浏览器中显示为：

Ang pusa ay naglalaro sa hardin.

<button> 元素

<button> 元素定义可点击的按钮：

实例

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

亲自试一试

以上 HTML 代码在浏览器中显示为：

HTML5 表单元素

HTML5 增加了如下表单元素：

  • <datalist>
  • <keygen>
  • <output>

注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

实例

通过 <datalist> 设置预定义值的 <input> 元素：

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

亲自试一试