form elements

本文深入解析HTML5中各种表单元素的功能与用法,包括input、select、textarea、button、datalist、keygen和output,同时介绍HTML5新增元素的特点及应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. input 是最重要的一项,下节会详细介绍


2. select 选择项,默认表现为下拉列表的形式(drop-down list)

option用来编写备选项,而且默认是选择第一个选项,

但是可以用selected来编写默认选项。

<form action="action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>


3. textarea 多行文字输入项

<form action="action_page.php">
  <textarea name="message" rows="10" cols="30">
  The cat was playing in the garden.
  </textarea>
  <br><br>
  <input type="submit">
</form>


4. button 按钮项,只是编写了一个按钮

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


以下是HTML5 的新增项

5. datalist 是input的另一种形式,默认下拉列表形式,但是要用id引入

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


6. keygen 注册机,分为公私两项,私人项会存储在当地,公共项会提交作为以后确认身份等用途

<form action="action_page.php">
  Username: <input type="text" name="user">
  <br><br>
  Encryption: <keygen name="security">
  <br><br>
  <input type="submit">
</form>


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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值