 html页面设置一个表单，填写完毕后提交可显示所填写的信息。

时间: 2023-06-27 16:07:36 浏览: 132

HTML5新增form控件和表单属性实例代码详解

第一个知识点：表单的属性及总结第二个知识点：H5新增的表单控件和属性以及总结第一个知识点：我们常见的表单验证有哪些呢　　text　　文本框标签　　password 密码框　　checkbox 多选框　　radio　　单选框　　button　　按钮　　submit　　提交按钮以上是我们常用的一些form属性第二个知识点：H5新的输入型控件　　(一)email:电子邮箱文本框，跟普通的没什么区别　　1.当输入不是邮箱的时候，验证不通过　　2.移动端键盘会有变化　　(二)tel:电话号码　　1.主要在移动端，一个键盘的切换　　(三)url:网页的URL 　　 HTML5在传统的HTML4.01基础上引入了许多新的特性，特别是在表单控制和验证方面，极大地提升了用户体验和开发者的工作效率。本文将详细讲解HTML5中新增的form控件和表单属性，并通过实例代码进行解析。 ### 第一个知识点：表单的属性及总结在HTML5中，表单元素增加了许多新属性，使得表单验证和处理更加灵活和强大。以下是一些常见的表单属性： 1. `text` - 文本输入框，用户可以输入任意文本。 2. `password` - 密码输入框，输入内容以星号或圆点遮蔽。 3. `checkbox` - 多选框，允许多个选项被选中。 4. `radio` - 单选框，同一组内只能选中一个。 5. `button` - 普通按钮，无特殊功能。 6. `submit` - 提交按钮，用于提交表单数据到服务器。这些属性都是我们在创建表单时经常使用的，但HTML5还引入了更多增强功能的属性，如`required`（强制输入）、`autofocus`（自动获取焦点）和`pattern`（正则表达式验证）等。 ### 第二个知识点：HTML5新增的表单控件 HTML5为表单控件添加了新的输入类型，以满足更具体的用户输入需求： 1. **`email`** - 电子邮箱输入框，内置验证输入是否为有效邮箱格式。在移动端，键盘会呈现电子邮件输入模式，方便用户输入。 ```html <input type="email" required> ``` 2. **`tel`** - 电话号码输入框，适用于移动端，调整键盘为电话号码输入模式。 ```html <input type="tel" pattern="[0-9]{10}"> ``` 3. **`url`** - 网页URL输入框，检查输入是否为有效URL。 ```html <input type="url" required> ``` 4. **`search`** - 搜索框，Chrome浏览器下，输入后会显示关闭的"x"图标，便于清除搜索内容。 ```html <input type="search"> ``` 5. **`range`** - 数值范围选择器，允许用户在指定范围内选择数值。可以使用`min`, `max`和`step`属性来设定范围和步长。 ```html <input type="range" min="1" max="100" step="5"> ``` 6. **`number`** - 只能包含数字的输入框，可以配合`min`, `max`和`step`属性进行限制。 ```html <input type="number" min="1" max="100"> ``` 7. **`color`** - 颜色选择器，让用户选择颜色。 ```html <input type="color"> ``` 8. **`datetime`** - 显示完整日期，例如`YYYY-MM-DDTHH:MM:SS`。 ```html <input type="datetime"> ``` 9. **`autocomplete`** - 自动填充，`on`表示开启，`off`表示关闭，用于控制浏览器是否保存并自动填充表单数据。 ```html <input type="text" autocomplete="off"> ``` 10. **`autofocus`** - 指定表单获取输入焦点，页面加载后该输入框自动获得焦点。 ```html <input type="text" autofocus> ``` 11. **`required`** - 必填项，不能为空。若未填写，表单提交时会触发错误提示。 ```html <input type="text" required> ``` 12. **`pattern`** - 正则表达式验证，用于自定义输入格式检查。 ```html <input type="text" pattern="[0-9]{1,5}" title="请输入1-5位数字"> ``` 通过这些新的表单控件和属性，HTML5不仅提供了更丰富的用户界面，还增强了数据验证的能力，从而减少了服务器端的验证负担，提高了应用程序的性能和用户体验。在实际开发中，结合JavaScript和CSS，可以创建出更加交互性强、功能丰富的Web表单。

可以使用HTML中的form表单和input标签来实现。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单示例</title> </head> <body> <form action="submit.php" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br><br> <label for="age">年龄：</label> <input type="number" id="age" name="age"><br><br> <input type="submit" value="提交"> </form> </body> </html> ``` 在这个示例中，form标签的action属性指定了提交表单时要执行的处理程序（这里是submit.php）。method属性指定了提交数据的方式，这里是POST。input标签用于输入各种类型的数据，例如文本、数字、电子邮件等。每个input标签都有一个name属性，它用于标识在提交表单时这个输入框中所输入的值。当用户点击提交按钮时，表单中的数据将被发送到submit.php处理程序。在处理程序中，可以通过$_POST数组获取表单中的数据，然后将其显示出来。

阅读全文

 html页面设置一个表单，填写完毕后提交可显示所填写的信息。

相关推荐

ASP.NET防止表单重复提交的令牌方法

Python实现：模板驱动的网站表单提交示例

html登录页面,html登录页面

登录页面html静态的html登录页面

表单自动填写，网页自动提交工具

用jsp实现简单的用户注册功能，点提交可以在另一个jsp页面显示用户注册信息

web登录页面及后台管理页面(静态的html源码文件)

公司官网HTML页面模板

基于Bootstrap的步骤引导html页面样式

jquery mobile + html5 手机app表单跨域提交实例（手机app开发html5 juqery moblie phonegap系列一）

通过htmlunit获取执行js代码后的html文档

html静态页面源代码

html弹窗页面19种

[精华]二十多套后台后管理系统网站模版 HTML，经典实用

一个不错的页面框架，html框架，oa能用到

bootstrap的整套框架的html静态页面示例集合

一个漂亮的h5登录页面，包含html,css和js

旅游类网站整套模板-html静态页面.rar

签到页面html

最新推荐

IDEA中HTML通过servlet3.0注解名提交表单到servlet类找不到页面的问题

django之从html页面表单获取输入的数据实例

Python3+Selenium+Chrome实现自动填写WPS表单

from表单多个按钮提交用onclick跳转不同action

Python实现模拟登录及表单提交的方法

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻