html5表单

最新推荐文章于 2023-08-15 13:06:59 发布
最新推荐文章于 2023-08-15 13:06:59 发布
阅读量436 收藏
点赞数
分类专栏： Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyq04551/article/details/53263361
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*<!-- 属性设置同html5-->*/
        /*form{*/
            /*width: 100%;*/
            /*/!* 最大宽度*!/*/
            /*max-width: 640px;*/
            /*/!* 最小宽度*!/*/
            /*min-width: 320px;*/
            /*margin:0 auto;*/
            /*font-family: "Microsoft Yahei";*/
            /*font-size: 20px;*/
        /*}*/

        /*input,meter,progress{*/
            /*display: block;*/
            /*width: 100%;*/
            /*height:30px;*/
            /*margin:10px 0;*/
        /*}*/
    </style>
</head>
<body>
<!-------------------------表单的类型-------------------------------->
<!-- type：表单的类型-->
<!--<input type="file" />-->
<form action=""><!--action 提交表单的地址-->
    <fieldset>
        <legend>表单属性</legend><!--表单大外框名称-->
            <label for="ee"><!--for跟的是Id值 可以喝input里面的Id值关联 点击名称 自动获取焦点-->

                <!-- 邮箱属性 自动验证输入是否有误 ”邮箱可以“用中文 也可以用英文不影响判断-->
                邮箱:<input type="email" name="email" id="ee"/>
            </label>
            <!-- url属性 也会验证网址输入是否有误-->
            <label for="">
                url:<input type="url" name="url" id="" >
            </label>

            <label for="">
                <!-- 数字类型 step=3 输入的数字为3的倍数默认上下拉滚动条-->
                number：<input type="number" name="number" step="3"/>
            </label>

            <label for="">
                <!-- 在浏览器上栏显示输入内容-->
                tel：<input type="tel" name="tel"/>
            </label>
            <label for="">
                <!-- 搜索框 输入内容被提交到浏览器地址栏-->
                search: <input type="search" name="search"/>
            </label>

            <label for="">
                <!-- range进度条 定义最小值 最大值 -->
                range: <input type="range" name="range" value="100" min="0" max="300"/>
            </label>

            <!-- time，date-->
            <label for="">
                <!-- 时间格式 -->
                time：<input type="time" name="time"/>
            </label>

            <label for="">
                <!-- date年月日 带下拉列表弹出日历功能  可以选择-->
                date: <input type="date" name="date" />
            </label>

            <label for="">
                month: <input type="month" name="month" />
            </label>

            <label for="">
                week: <input type="week" name="week" />
            </label>

            <input type="submit" value="提交"/>
    </fieldset>
</form>



<!-----------------------------------------智能下拉表单--------------------------------------------->
                <select >
                    <option>选项1</option>
                    <option>选项1</option>
                    <option>选项1</option>
                    <option>选项1</option>
                </select>
                <br/><br/><br/>
                <!--  一个普通的输入框-->
                <!-- 通过list=car 跟下面的 datalist标签中的id值进行关联-->
                <input type="text" list="car" />

                <!-- datelist为下拉菜单标签-->
                <!--数据列表标签-->
                <datalist id="car">
                    <option>宝马</option>
                    <option>宝骏</option>
                    <option>宝强</option>
                    <option>宝宝</option>
                    <option>奥迪</option>
                    <option>奥迪奥</option>
                    <option>迪奥</option>
                </datalist>



<!-------------------------------------表单元素-------------------------------------------->
<form action="">
    <fieldset>
        <legend>表单元素</legend>
        <label>
            用户名：<input type="text" name="userName" />
        </label>

        <label>
            <!--密码属性-->
            密码：<input type="password" name="pwd" />
        </label>
        <label >
            性别：<input type="text" name="sex" list="sex" />
        </label>

        <!-- 定义数据列表-->
        <datalist id="sex">
            <option >男</option>
            <option >女</option>
            <option >不祥</option>
            <option >其它</option>
        </datalist>

        <label for="">
            推荐人：<output>春哥</output>
        </label>
        <br/><br/>
        <label for="">
            加密类型： <keygen/>
        </label>
        <br/><br/>
        <label for="#">
            度量器：<meter value="50" max="100" min="0" low="30" high="80"></meter>
        </label>
        <!-- 进度条-->
        <progress value="40" max="100" min="0"></progress>
        <!-- progress 进度条 progress progress progress 进度条progress 进度条
        progress 进度条 -->
        <input type="submit" value="提交"/>
    </fieldset>
</form>

<!-----------------------------------表单属性-------------------------------------------------------->

            <!--<!– 表单新增属性–>-->
            <!--<input type="text" class="name" />-->
            <!--
                placeholder:提示文字（占位符）
                autofocus:自动获取焦点
                autocomplete: 自动完成（填充的） on 开启（默认）  off 取消自动提示
                required: 必填
                multiple: 多选
                novalidate:关闭默认的验证功能（只能加给form）
                pattern: 自定义正则验证
                pattern="1\d{10}"
            -->
    <!--<form action="" novalidate>-->
    <form action="" >
        <fieldset>
            <legend>表单属性</legend>
            <label for="">
                <!--  placeholder:提示文字（占位符）   autofocus:自动获取焦点 应用-->
                用户名：<input type="text" placeholder="例如：李狗蛋" autofocus name="userName" autocomplete="on" required/>
            </label>
                <!--  pattern: 自定义正则验证 pattern="1\d{10}" 应用-->
            <label for="">
                电话：<input type="tel" pattern="1\d{10}" />
            </label>

            <!-- 上次文件-->
            <input type="file" name="file" multiple/>

            <input type="submit" />
        </fieldset>
    </form>



</body>
</html>

约德尔蒙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5的表单
karry_yuan的博客
03-22 2480
感兴趣的可以来学习呀
HTML5基础笔记五（标签之表单）
qq_55006020的博客
06-27 1226
表单也是一个大内容form表单表单在wep网页中是用来给用户填写信息的，从而能采集用户的联系，使网页具有交互的功能所有用户输入内容的地方都用表单来写，如登录框，搜索框，选择框等表单的属性有action 行动 也就是服务器地址name 表单的名称method 有get和post两种方法 用来提交数据给服务器表单的三要素1，表单标签 fomr表单标签2，表单域 input3，表单按钮表单的元素文本框 文本框通过input来设置。
HTML5的表单(form)介绍
cnds123的专栏
10-08 8302
HTML 表单(form)介绍
HTML5表单标签和表格标签详解
一只文森特
12-09 2225
表单标签和表格标签
input标签的值只能两位小数_【HTML】5 HTML标签：表单
weixin_30417063的博客
01-09 184
1、表单的作用：收集用户信息2、表单的组成：表单域、表单控件（也称表单元素）、提示信息3、表单域：一个包含表单元素的区域，用<form></form>标签定义，<form></form>会把它范围内的表单元素提交给服务器。在我们写表单元素之前要有个表单域将其包含表单域就是form标签，form标签就是表单域4、表单元素允许用户在表单中输入或者选择的内...
HTML5中的表单
chenyiboke的博客
10-28 518
表单 1. 表单作用 用于显示、收集用户信息，并将信息提交给服务器 1. 表单元素-负责将用户数据提交给服务器 2. 表单控件-负责接收用户的数据（与用户进行数据交互） 2. 表单元素 1. 标记 <form></form> 2. 属性 1. action 定义表单被提交时的动作，主要就是服务器上处理数据的应用 程序URL 默认是提交给本页 2. meth...
html5表单及新增的改良元素详解
09-27
HTML5在传统的HTML4.01基础上对表单功能进行了大幅度的增强和改进，使得网页开发者能够构建更强大、更具交互性的用户界面。本文将详细解析HTML5中新增的表单元素及其改良特性。 1. **form属性**： 在HTML5中，表单...
html5表单动态添加工作事项代码
11-24
HTML5是Web开发中的一个重要里程碑，它引入了许多新特性，其中就包括对表单功能的增强，使得在网页上创建动态、交互性更强的工作事项管理变得更加便捷。在本主题中，我们将深入探讨如何利用HTML5的特性来实现动态...
html5表单注册进度条提示效果特效代码
03-20
首先，HTML5表单提供了更强大的数据输入控件和验证功能。例如，`<input>`标签新增了诸如`type="email"`、`type="tel"`等类型，以便为特定的数据类型提供内置的验证。此外，`required`属性可以确保用户必须填写某些...
HTML5表单API项目.rar
10-21
用户注册页面的设计与实现:使用HTML5表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。...以手机移动支付业务为例，使用HTML5表单技术实现相关业务的问卷调查页面。
HTML5实现漂亮的分步骤注册登录表单
02-20
分步骤的登录注册表单现在也比较多，主要是能提高用户体验，用户可以有选择性的填写相应的表单信息，不至于让用户看到一堆表单望而却步。今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单，外观不用说，非常漂亮。你看一下DEMO就知道了。
HTML5 好看的注册表单
11-14
注册表单在网页应用中十分重要，今天要向大家分享一款基于HMLT5的分步骤注册表单页面，表单外观比较华丽，点击下一步按钮即可跳转到下一步填写注册信息。该HTML5表单使用了很多CSS3属性，从而在表单切换时拥有弹性的动画，是一款很不错的HTML5表单。建议使用支持HTML5与CSS3的火狐或谷歌等浏览器预览本实例源码。
HTML5 表单元素
12-13
HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: 注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。 HTML5 元素 ...
html5 表单标签
weixin_49346755的博客
09-30 1971
HTML 表单用于收集不同类型的用户输入，表单标签允许用户在表单中输入内容。表单标签指的是不同类型的 input 标签、复选框、单选按钮、提交按钮等。多数情况下被用到的表单标签是输入标签 ，输入类型是由 type 属性定义。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
html5之form表单
python全栈
01-13 1898
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。 一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,
html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性
YangLu888
10-02 8016
html表单form的常用标签以及属性和html5的新增属性
设计HTML5表单
最新发布
布道师小羊的博客
08-15 1958
一文读懂HTML表单设计！
第4章 HTML5表单
XSZL_liaojc的博客
07-09 764
表单在网页设计中用于收集数据。 一、新增的<form>表单属性 1、autocomplete 取值（on/off/空值），规定输入字段是否应该启用自动补全功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 2、novalidate 用于提交表单时取消整个表单的验证，即关闭对表单的有效性验证，可以单独用于表单中的元素。 二、新增的表单元素 1、<datalist> ...
HTML5中的form表单
IBLiplus的博客
07-15 7983
&lt;form&gt; 元素用于生成输入表单，该元素不会生成可视化部分，它除了通用属性id、style、class外，还可以指定onclick事件，除此之外，还有以下几个属性：        Action： 指定当单击表单内的确认按钮时，该表单被提交到那个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址，该属性必填，非常重要！        method：指定提交表单时发送何种请求，该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值