h5 表单

最新推荐文章于 2024-05-06 23:04:28 发布
最新推荐文章于 2024-05-06 23:04:28 发布
阅读量1.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42595284/article/details/82353468
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        fieldset{
            width: 500px;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        legend{
            text-align: center;
            font-size: 20px;
        }
        label{
            display: flex;
            width: 100%;
            margin: 20px 0;
            height: 24px;
            line-height: 24px;
            border: 1px solid #ccc;
            border-radius: 12px;
        }
        span{
            flex: 1;
            text-align: center;
        }
        input{
            border-radius: 3px;
            outline: none;
            border: 0;
            width: 100%;
            flex: 4;
            border-radius: 12px;
            padding-left: 10px;
        }
        input::-webkit-input-placeholder{
            color: #ccc;
        }
        select{
            flex: 4;
            outline: none;
            border: 0;
            border-radius: 12px;
        }
        #btn{
            width: 100px;
            height: 24px;
            line-height: 24px;
            color: #fff;
            margin-right: 20px;
            background: blue;
        }
        button{
            width: 100px;
            height: 24px;
            border-radius: 12px;
            border: 0;
            background: blue;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>学生档案</legend>
        <form action="www.baidu.com" method="post">
            <label for="name"><span>姓名：</span><input type="text" placeholder="请输入姓名" id="name" name="name" autofocus required></label>

            <label for="tel"><span>电话：</span><input type="tel" placeholder="请输入电话号码" id="tel" name="tel" maxlength="11" required></label>

            <label for="email"><span>邮箱：</span><input type="email" placeholder="请输入email" id="name" name="email" required></label>

            <label for="date"><span>出生日期：</span><input type="date" id="date" name="date" required></label>

            <label for="school">
                <span>选择学校：</span>
                <select name="school" id="school">
                    <option value="北京大学">北京大学</option>
                    <option value="清华大学">清华大学</option>
                    <option value="浙江大学">浙江大学</option>
                </select>   
            </label>

            <label for="number"><span>成绩：</span><input type="number" placeholder="请输入成绩" id="number" name="number" maxlength="3" required></label>

            <label for="date"><span>入学时间：</span><input type="date" id="date" name="date" required></label>

            <label for="date"><span>毕业时间：</span><input type="date" id="date" name="date" required></label>
            <input id="btn" type="submit" value="提交">
            <button><a href="index.html">重置</a></button>
        </form>
    </fieldset>
</body>
</html>
卟良亻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5表单
Conely的博客
08-09 1306
H5表单 progress 进度条 max ：进度元素要完成的任务工作量，默认值为1。 value ：定义已经完成的工作量，如果max值为1，该值必须介于0-1之间的小数。 output 用户动作产生的结果 name：定义元素的名称。 for： meter 规定范围的内的数量值–磁盘使用量、投票人数比例 value ：在元素中特地表示出来的实际值，该值在min与max之间，如果未指定 ，该值默认为1 min ：指定规定范围时允许使用的最小值，默认为0 max：指定规定范围时允许使用的最大值，默认为1 l
h5中的表单
芮欧巴的博客
05-04 2456
表单 注意： require:必填项 placeholder  。 代码显示： <!-- get跳转地址时地址后面显示表单后面的内容
表单的基础语法
weixin_71643873的博客
06-29 275
..... 男女使用场景：多个选项最多只能选一个备注：1.多个选项只选其中一项时，每个单选框的name值必须一致2.必须要有v
2024年前端最新HTML5 表单元素和属性学习，建议细读
最新发布
2401_84435700的博客
05-06 544
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???
HTML5——设计一个表单
万里顾一程的博客
11-02 3916
HTML5——设计一个表单 post和get提交 get方式提交：提交后可以在url中看到我们填写的信息（账号，密码等），会不安全，但是高效，不能传输大文件 post方式提交：不能看到我们填写的信息，比较安全，也可以传输大文件 要素 文本框 单选框和多选框 按钮 文本域和文件域 搜索滑框和简单验证 初级验证 <!DOCTYPE html> <html lang="en"> <head> <meta c
HTML5创建表单
FOR.GET
09-16 3038
1 认识表单   表单主要同于收集网页浏览者的相关信息，用。使用语法如下： <from action="url" method="get|post" enctype="mime"></from> action：用于处理提交表单的格式，它可以是一个URL地址或一个电子邮箱地址。 method：指明提交表单的HTTP方法。 enctype：指明用来把表单提交给服务器得到互联网媒体形式。 <!DOCTYPE html> <html lang="en"> &lt
H5 设计简单表单
zuo_zuo_blog的博客
03-27 2910
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100%; ...
h5表单
weixin_41571206的博客
09-15 1069
h5表单理解标题 input常用控件label标签textare标签下拉菜单select表单域form 理解 现实中的表单，类似我们填的单子。 目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。 表单控件： 包含了具体的表单功能项，如单行文本输入...
H5表单美化
10-26
通过结合新的HTML5表单元素、语义化标签，以及CSS3的各种样式和动画特性，我们可以打造出既美观又实用的H5表单。实践中，一定要注重用户体验，合理运用这些技巧，使表单不仅看起来吸引人，而且易于使用。在提供的...
H5自适应登录和注册表单
03-27
一个优秀的H5表单设计应考虑无障碍性，比如使用`<label>`元素绑定输入框，提供`<legend>`来解释表单组的目的，以及使用`aria-*`属性增强屏幕阅读器的可访问性。 总结起来，"H5自适应登录和注册表单"是一个集成了...
H5用户注册表单页 注册模态框!
11-25
在本实例中，我们探讨了如何使用HTML5（H5）的新特性来创建一个用户注册表单页，其中包括了各种类型的输入字段以及表单验证功能。以下是对这些知识点的详细说明： 1. **HTML5 表单新特性**：HTML5引入了多种新的...
H5表格、表单、框架.ppt
04-27
H5表格、表单、框架.ppt，包含介绍和例子，ppt！H5表格、表单、框架.ppt，包含介绍和例子，ppt！
带动画效果的CSS3 H5表单输入框验证代码.zip
07-11
代码片段：  使用 ：CSS3中的验证选择器 ...input type="text" class="exp__input" id="example" name="test" placeholder="Full Name" required>...input type="email" class="exp__input" id="example2" ...
H5-表格的基本样式
热门推荐
chenzhaoxiong123的博客
11-01 1万+
1.选择器 类选择器：通过给标签元素起一个classname类名 的方式，在编写样式的时候，用类名来获取该元素 .div1{ width:200px; height:200px; background-color:blue; } id选择器： 给元素起一个id名，用来获取该元素，设置样式的时候使用一个元素即可以同时有id名和类名 #div2{
HTML5权威指南——表单
gyypwrs的博客
10-25 299
复习以前写的文章发现一大段一大段的话我自己都不想读下去，从这一篇往后，我就将一些要点像无序列表的样子呈现了。 制作基本表单 制作基本表单就依靠三个元素form，input，button元素。form元素告诉浏览器现在是一个HTML表单了。input元素用来收集用户的输入数据。button元素的作用就是告诉浏览器输入完毕啦，该把我发到服务器了。 这样写就生成一个简单的表单了。 <form> <input placeholder="请输入···"> <button&
html5学习16：表单
八十岁老将的博客
02-07 666
1、制作基本表单 制作一个基本的表单需要三个元素: form、input和button元素。 <form method="post" action="http://titan:8080/form"> <input name="fave"/> <button> Submit vote </button> </form> 1.1 定义表单 1）form元素 可以流元素的元素的子元素，但form元素不能是其他fo
表单与表格H5
qq_43689368的博客
09-22 409
表单与表格 表单：收集数据 1.form ①action：提供地址 ②method:数据提交方式；GET与POST 2.input 输入框属性：①text文字输入框 ②password:密码输入框 ③submint:提交按钮 ④radio：单选框 ⑤checkbox:复选框 ⑥file:文件上传 ⑦date:日历 3.label:创建文本和输入框的联系 4.select option:下拉框 表格 table 1.tr: table row;表格的行 2.th:table header;表格头部的行 3.t
使用H5设计表单
xiaobozhu的博客
12-16 6764
使用H5设计表单 强大的HTML5，极大地增强了表单的设计能力，实现了很多以前需要大量编码才能实现的功能。下面我们一起来看看吧。 l        传统表单元素 action属性，给出绝对地址，可以指向任何服务器 method属性，查询建议用get方式，增删改建议用post方式 必要属性有name和type,它的类型有text,password,checkbox[复选框],button,
html5之form表单
python全栈
01-13 1923
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。 一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,
h5表单验证datalist
05-13
但是，datalist并不提供表单验证功能。要实现表单验证，可以使用JavaScript来检查输入的值是否与datalist中的选项匹配。以下是一个例子： HTML代码： ```html 请选择水果： 苹果"> 香蕉"> 橘子"> 梨"> ()">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值