主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

HTML 输入类型

HTML 提供了多种表单输入类型,不仅增强了用户输入的灵活性,还提供了更强大地输入控制和验证功能。

本章全面介绍 HTML 表单<input>输入类型:

输入类型 类型描述
text 单行文本输入框,用于输入普通文本,如用户名、地址等。
password 密码输入框,输入内容会被隐藏(显示为圆点或星号)。
submit 提交按钮,用于提交表单数据到服务器。
radio 单选按钮,允许用户从一组选项中选择一个。
checkbox 复选框,允许用户从一组选项中选择多个。
button 普通按钮,通常用于触发 JavaScript 事件。

Input 类型: text

<input type="text">定义供文本输入的单行输入字段:

实例代码 运行代码
复制
<form>
    First name:<br>
    <input type="text" name="firstname">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
</form>

Input 类型: password

<input type="password">定义输入密码字段:

实例代码 运行代码
复制
<form>
    User name:<br>
    <input type="text" name="username">
    <br>
    User password:<br>
    <input type="password" name="psw">
</form>

注释:password 字段中的字符会被做掩码处理(显示为星号或实心圆)。


Input 类型: submit

<input type="submit">定义提交表单数据至表单处理程序的按钮:

实例代码 运行代码
复制
<form action="action_page.php">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
</form>

Input 类型: radio

<input type="radio">定义单选按钮:

实例代码 运行代码
复制
<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

提示: iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。


Input 类型: checkbox

<input type="checkbox">定义复选框:

实例代码 运行代码
复制
<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Input 类型: button

<input type="button">定义按钮:

实例代码 运行代码
复制
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

HTML5 引入了多种新的输入类型,这些新特性显著提升了表单的功能性和用户体验,请查阅 HTML5 输入类型




评论区 0
发表评论



留下您的精彩评论吧