新增表单元素及其属性-编程入门课：HTML(5)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：HTML(5)从入门到实战

HTML5作为最新版本的HTML标准，引入了许多新的表单元素和属性，这些元素和属性在提供更好的用户体验和开发效率方面发挥了重要作用。下面是HTML5中新增的一些表单元素及其属性。
1.`<input`>类型属性
在HTML5中，`<input>`元素新增了一些类型属性，用于表示不同类型的表单控件。下面列举了一些常用的`<input>`类型属性及其作用：

- type="search"：用于表示搜索框，可添加placeholder属性设置默认提示文字。
- type="tel"：用于表示电话号码输入框，可添加pattern属性设置输入格式。
- type="url"：用于表示URL输入框，可添加placeholder属性设置默认提示文字。
- type="email"：用于表示邮件地址输入框，可添加multiple属性表示允许输入多个邮件地址。
- type="date"：用于表示日期选择框，可添加min和max属性设置可选日期范围。

示例代码如下：
```asp
<form>
  <label for="search">搜索：</label>
  <input type="search" id="search" placeholder="请输入搜索内容">
  
  <label for="tel">电话号码：</label>
  <input type="tel" id="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
  
  <label for="url">网址：</label>
  <input type="url" id="url" placeholder="请输入网址">
  
  <label for="email">邮件地址：</label>
  <input type="email" id="email" multiple>
  
  <label for="date">日期：</label>
  <input type="date" id="date" min="2023-04-01" max="2023-04-30">
</form>

```
2.`<input>`新属性
在HTML5中，`<input>`元素还新增了一些新属性，用于提供更好的用户体验和开发效率。下面列举了一些常用的`<input>`新属性及其作用：

- placeholder：用于设置默认提示文字，当用户未输入时显示该文字。
- autocomplete：用于控制表单自动完成功能，可设置on、off、name等值。
- required：用于表示该输入框为必填项。
- pattern：用于设置输入框的正则表达式格式。
- min和max：用于设置输入框的最小和最大值。

示例代码如下：
```asp
<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" placeholder="请输入用户名" autocomplete="username" required>
  
  <label for="password">密码：</label>
  <input type="password" id="password" placeholder="请输入密码" autocomplete="new-password" required pattern=".{6,}">
  
  <label for="age">年龄：</label>
  <input type="number" id="age" min="0" max="120" required>

</form>

```
3.`<textarea>`新属性
在HTML5中，`<textarea>`元素也新增了一些新属性，用于提供更好的用户体验和开发效率。下面列举了一些常用的`<textarea>`新属性及其作用：

placeholder：用于设置默认提示文字，当用户未输入时显示该文字。
maxlength：用于设置文本框可输入的最大字符数。
wrap：用于控制文本框的换行方式，可设置soft和hard两种值。
spellcheck：用于控制拼写检查功能。
示例代码如下：
```asp
<form>
  <label for="message">留言：</label>
  <textarea id="message" placeholder="请输入留言" maxlength="200" wrap="soft" spellcheck="true"></textarea>
</form>

```
4.新增表单元素
在HTML5中，还新增了一些表单元素，用于提供更好的用户体验和开发效率。下面列举了一些常用的新增表单元素及其作用：

```asp
<datalist>：用于创建下拉列表，可与<input>配合使用。
<output>：用于显示计算结果等输出内容。
<progress>：用于显示任务进度条。
<meter>：用于显示范围值的表格。
```
示例代码如下：
```asp
<form>
  <label for="fruit">选择水果：</label>
  <input list="fruits" id="fruit">
  <datalist id="fruits">
    <option value="苹果">
    <option value="香蕉">
    <option value="橙子">
    <option value="草莓">
  </datalist>
  
  <button type="submit">提交</button>
  
  <output for="fruit"></output>
  
  <progress max="100" value="50"></progress>
  
  <label for="range">范围：</label>
  <input type="range" id="range" min="0" max="10">
  
  <meter value="6" min="0" max="10"></meter>
</form>

```
在HTML5中新增的表单元素和属性为表单控件的开发提供了更好的选择和灵活性，能够让开发人员更加方便地创建出符合要求的表单。

该分类下的相关小册推荐：

编程入门课：CSS(3)从入门到实战