菜单 搜索
首页 前端知识 HTML5表单控件

HTML5表单控件

2025-03-13 15:03:09 前端知识 前端哥 425 380 我要收藏

      表单需要被from包裹着使用 例如：                                                                                                                           

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
 
  </style>
</head>
 
<body>
  <form action="">
    <label for="username">邮箱：</label>
    <input type="email" name="username" id="username" placeholder="请输入邮箱">
  </form>
 
</body>
 
</html>
复制

                                                                                                                                         输入框（<input>）

  • 文本输入框（type="text"）：这是最常见的表单控件之一，用于接收用户输入的单行文本信息，如用户名、搜索关键词等。通过设置placeholder属性，可以在输入框中显示提示信息，引导用户输入内容，并且该提示信息不会占据实际的输入值位置，增强了用户体验。例如：
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
 
  </style>
</head>
 
<body>
  <label for="username">用户名：</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
</body>
 
</html>
复制

执行结果：

  • 密码输入框（type="password"）：专门用于输入密码等敏感信息，输入的内容会以加密形式显示，通常为黑色实心原点或星号，以保护用户隐私。不同浏览器的加密显示效果可能略有不同. 
    		<!DOCTYPE html>
    		<html lang="en">
    		 
    		<head>
    		  <meta charset="UTF-8" />
    		  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		  <title>Document</title>
    		  <style>
    		 
    		  </style>
    		</head>
    		 
    		<body>
    		  <label for="username">用户名：</label>
    		<input type="password" name="username" id="username" placeholder="请输入密码">
    		</body>
    		 
    		</html>
    复制

    执行结果：                                                        

    • 数字输入框（type="number"）：限制用户只能输入数字类型的值，还可以通过min、max和step属性来限定数字的取值范围和步长，适用于输入年龄、数量等数字信息。 
      		<!DOCTYPE html>
      		<html lang="en">
      		 
      		<head>
      		  <meta charset="UTF-8" />
      		  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      		  <title>Document</title>
      		  <style>
      		 
      		  </style>
      		</head>
      		 
      		<body>
      		  <label for="username">年龄：</label>
      		<input type="number" name="username" id="username" placeholder="请输入年龄" max="3" style="3">
      		</body>
      		 
      		</html>
      复制

      执行结果：                                                                                                                        

      • 邮箱输入框（type="email"）：用于输入邮箱地址，浏览器会自动验证输入的内容是否符合邮箱格式，若不符合则会提示用户，提高了数据的准确性. 
        		<!DOCTYPE html>
        		<html lang="en">
        		 
        		<head>
        		  <meta charset="UTF-8" />
        		  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        		  <title>Document</title>
        		  <style>
        		 
        		  </style>
        		</head>
        		 
        		<body>
        		  <form action="">
        		    <label for="username">邮箱：</label>
        		    <input type="email" name="username" id="username" placeholder="请输入邮箱">
        		  </form>
        		 
        		</body>
        		 
        		</html>
        复制

        执行结果：​​​​​​​        

    • 日期输入框（type="date"）：提供了一个方便的日期选择器，用户可以直接点击选择日期，无需手动输入，格式通常为年 - 月 - 日，其显示样式会根据浏览器的默认设置有所不同. 
      		<!DOCTYPE html>
      		<html lang="en">
      		 
      		<head>
      		  <meta charset="UTF-8" />
      		  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      		  <title>Document</title>
      		  <style>
      		 
      		  </style>
      		</head>
      		 
      		<body>
      		  <form action="">
      		    <label for="username">日期：</label>
      		    <input type="date" name="username" id="username" placeholder="请选择日期">
      		  </form>
      		 
      		</body>
      		 
      		</html>
      复制

      执行结果：

单选框（<input type="radio">）

单选框用于在多个选项中只能选择一个的情况，如性别选择。多个单选框的name属性必须相同，才能实现单选效果，并且一般会为每个单选框设置value属性，用于指定其被选中后提交的值，还可以通过checked属性设置默认选中项. 例如：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
 
  </style>
</head>
 
<body>
  <form action="">
    <label>性别：</label>
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
 
  </form>
 
</body>
 
</html>
复制

  执行结果：                                                                                                                                       复选框（<input type="checkbox">）

复选框允许用户选择多个选项，常用于选择兴趣爱好、勾选同意条款等场景。同样可以为每个复选框设置value属性和checked属性来指定提交值和默认选中状态. 例如：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
 
  </style>
</head>
 
<body>
  <form action="">
    <label>爱好：</label>
    <input type="checkbox" name="like" value="study">学习
    <input type="checkbox" name="like" value="shopping">逛街
    <input type="checkbox" name="like" value="programming">编程
    
  </form>
 
</body>
 
</html>
复制

执行结果： 

文本域（<textarea>）

当用户需要输入较多行的文本内容时，就会用到文本域。通过rows和cols属性可以分别定义文本区域的行数和列数，以控制其显示大小。例如：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
 
  </style>
</head>
 
<body>
  <form action="">
    <label>个人介绍：</label>
    <textarea name="introduce" rows="5" cols="30"></textarea>
    
  </form>
 
</body>
 
</html>
复制

执行结果：        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​ 

下拉菜单（<select>与<option>）

下拉菜单适用于在有限的空间内提供多个选项供用户选择的情况，如选择籍贯、学历等。<select>标签用于定义下拉菜单的整体框架，而<option>标签则用于定义每个具体的选项，其中可以通过设置selected="selected"属性来指定默认选中的选项. 例如：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
 
  </style>
</head>
 
<body>
  <form action="">
    <label>籍贯：</label>
    <select name="site">
      <option value="0">北京</option>
      <option value="1">上海</option>
      <option value="2">深圳</option>
      <option value="3">广州</option>
      <option value="4">杭州</option>
      <option value="5">苏州</option>
    </select>
    
  </form>
 
</body>
 
</html>
复制

执行结果：​​​​​​​                               

按钮控件

  • 提交按钮（<input type="submit">）：用于将表单中的数据提交给服务器，其value属性可以修改按钮上显示的文本，默认值为 “提交”。通常与<form>标签的action属性配合使用，指定数据提交的地址. 
    		<!DOCTYPE html>
    		<html lang="en">
    		 
    		<head>
    		  <meta charset="UTF-8" />
    		  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		  <title>Document</title>
    		  <style>
    		 
    		  </style>
    		</head>
    		 
    		<body>
    		  <form action="">
    		  <label>爱好：</label>
    		<input type="checkbox" name="like" value="study">学习
    		<input type="checkbox" name="like" value="shopping">逛街
    		<input type="checkbox" name="like" value="programming">编程
    		<input type="submit">
    		  </form>
    		 
    		</body>
    		 
    		</html>
    复制

    执行结果：    点击提交按钮后会自动提交到服务器中

    • 重置按钮（<input type="reset">）：点击该按钮可以将表单中的所有输入框、选择框等恢复到初始状态，其value属性默认值为 “重置”. 
      		<!DOCTYPE html>
      		<html lang="en">
      		 
      		<head>
      		  <meta charset="UTF-8" />
      		  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      		  <title>Document</title>
      		  <style>
      		 
      		  </style>
      		</head>
      		 
      		<body>
      		  <form action="">
      		  <label>爱好：</label>
      		<input type="checkbox" name="like" value="study">学习
      		<input type="checkbox" name="like" value="shopping">逛街
      		<input type="checkbox" name="like" value="programming">编程
      		<input type="reset">
      		  </form>
      		 
      		</body>
      		 
      		</html>
      复制

      执行结果：     点击重置按钮后会全部清除所选和所填的内容

  • 普通按钮（<input type="button">）：本身没有特定的功能，主要用于通过 JavaScript 为其绑定事件来实现各种自定义的操作，如点击按钮弹出提示框、执行特定的计算等.
  • 图片按钮（<input type="image">）：可以使用图片来代替普通的提交按钮，通过src属性指定图片的路径。需要注意的是，使用图片按钮可能会导致表单提交两次，一般不建议使用.

文件选择框（<input type="file">）

文件选择框用于让用户选择本地计算机上的文件，如上传头像、简历等文件。可以通过设置accept属性来限制可选择的文件类型. 例如：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
 
  </style>
</head>
 
<body>
  <form action="">
    <label>照片：</label>
    <input type="file" name="image">
    
  </form>
 
</body>
 
</html>
复制

执行结果：         

隐藏域（<input type="hidden">）

隐藏域用于在表单中存储一些不需要用户直接输入，但需要随表单一起提交给服务器的额外信息，如用户的 ID、当前页面的标识等。用户在页面上看不到隐藏域，但它的值会随着表单的提交而传递到服务器. 例如：

<input type="hidden" name="hid01" value="12">
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/23527.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

【EB-07】TC397 Tresos 导入通信ARXML

2025-03-15 13:03:18

力扣-单调栈-739 每日温度

2025-03-15 13:03:17

代码随想录二刷|图论2

2025-03-15 13:03:59

数据库原理4

2025-03-15 13:03:58

使用WebSocket进行通信的图形用户界面应用程序

2025-03-15 13:03:57

爬虫面试：关于爬虫破解验证码的13个经典面试题

2025-03-15 13:03:57

代码随想录第五十天| 图论理论基础

2025-03-15 13:03:56

java常见面试01

2025-03-15 13:03:56

Floyd算法——有向图

2025-03-15 13:03:55

将数据库结构化数据整合到RAG问答中的方式

2025-03-15 13:03:54

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！