h5的form属性

最新推荐文章于 2023-05-06 17:45:56 发布
最新推荐文章于 2023-05-06 17:45:56 发布
阅读量425 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo7024389/article/details/69400514
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--action属性用来指定我的表单数据提交到哪里去
    method: 指定网络请求的方式，
            1、get请求，传递到服务器的数据以追加到url路径后的方式发送
                       规则：所有的数据都在？之后，多个数据以&符号进行分割
                       ?name=hy&pwd=123
                  缺点：网络请求数据直接暴露在url里面，敏感数据容易被窃取
                       数据传输量小
            2、post请求：传递到服务器端的数据隐藏在请求体里，隐藏敏感数据。
                   优点：传输的数据隐秘性较好，
                        数据传输量基本上无限制-->
<!-- input框的类型    name属性必须添加！！为了正常的提交数据到你的服务器，
     text：单行文本输入
     password：密码 输入的文本以隐藏方式显示
     radio：单选框 互斥的效果通过同名name来实现，value是提交石距的时候方便组成键值对
     checkbox：多选框
     reset:重置表单数据
     file：文件上传
     submit：提交表单数据
     image：图形提交按钮
     button：普通按钮
     select:下拉选择
     textarea：文字区块-->
<P style="font-size: 20px">form表单</P>
<form action="tiaozhuan.html" method="get" id="jredu">
    <fieldset>
    <legend>登录注册</legend>
    <table>
        <tr>
            <td>会员名：</td>
            <td>
                <input type="text" name="name" tabindex="1" autocomplete="off"
                       required autofocus placeholder="请输入会员名" value="飘逸的蜗牛" readonly/>
            </td>
            <td>(可包含9个数字26个字母)</td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="pwd" placeholder="请输入密码"/></td>
            <td>(至少包含6个字符)</td>
        </tr>
        <tr>
            <!--单选框-->
            <td>性别</td>
            <td>
                <input type="radio" name="rex" value="boy"/>男
                <input type="radio" name="rex" value="girl"/>女
                <input type="radio" name="rex" value="secrit"/>保密
            </td>
        </tr>
        <tr>
            <!--多选框-->
            <td>爱好</td>
            <td>
                <input type="checkbox" name="hobby" value="basketball"/>篮球
                <input type="checkbox" name="hobby" value="football"/>足球
                <input type="checkbox" name="hobby" value="pingpang"/>乒乓球
            </td>
        </tr>
        <tr>
            <td>附件</td>
            <td><input type="file" name="file" /></td>
        </tr>
        <tr>
            <td>图片按钮</td>
            <td align="center">
                <input type="image" src="../../img/dongman.jpg" width="100px" height="100px"/>
            </td>
        </tr>
        <tr>
            <td>普通按钮</td>
            <td align="center">
                <input type="button" value="我是按钮"/>
            </td>
            <td>
                <button>普通按钮</button>
            </td>
        </tr>
        <tr>
            <td>家乡</td>
            <td>
                <select name="home" id="home1" width="200px" >
                    <option value="shandong">山东</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="chongqing">重庆</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>协议</td>
            <td>
                <textarea name="" id="" cols="30" rows="10">sadas</textarea>
            </td>
        </tr>
        <tr>
            <td>
                下拉菜单
            </td>
            <td>
                <input id="myCar" list="cars" />
                <datalist id="cars">
                    <option value="BMW">
                    <option value="Ford">
                    <option value="Volvo">
                </datalist>
            </td>
        </tr>
        <tr height="200px">
            <td><input type="submit"/></td>
            <td><input type="reset"/></td>
        </tr>

    </table>
    </fieldset>
</form>
<input type="text" name="nick" form="jredu"/>
</body>

</html>


显示如下：
Gumballs
关注
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
h5表单
weixin_41571206的博客
09-15 1131
h5表单理解标题 input常用控件label标签textare标签下拉菜单select表单域form 理解 现实中的表单，类似我们填的单子。 目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。 表单控件： 包含了具体的表单功能项，如单行文本输入...
H5基础【1】—form表单新旧属性
采花小盗周的博客
05-08 473
一、html中的form老属性 二、h5中的form新属性 1.邮箱email 2.数字number 3.手机号tel 4.服务器网址url 5.搜索search 6.调节按钮(进度)range
html5之form表单
python全栈
01-13 2132
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。 一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,
H5学习笔记——form表单
OneKey
03-16 4203
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&
h5新增——form表单
weixin_45454433的博客
01-14 1214
1.增强性的表单：直接进行表单的验证，或者是对应的语义化的表单 格式：<input type="?"> 1）placeholder：提示文本，用来占位的提高用户体验度 2）required：验证内容不能为空 3）multiple：提交多个邮箱，多个邮箱之间用逗号分隔 4）autofocus：自动获取焦点（选中输入框的时候会出现一个加深的黑框） 属性： 1.url：输入框里面需要输入url网址；若想要验证这个url输入框不为空的话需要带required属性，如果不带一定要给内容，不然
h5form:HTML5表单polyfill
05-13
h5form v0.2.8 HTML5 form Field polyfill 为了解放开发者，HTML5引入了约束验证的概念，一种本地实现的网页表单验证。尽管所有主流浏览器的最新版本都支持了这个特性，但一些浏览器尚未实现。这个项目的主要功能...
HTML5表单Form之属性
MmalinL的博客
08-19 883
一.什么是form？ Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给Web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单控件组成，这些表单控件是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，使用表单控件时一般要配合label标签，用于描述其目的。 二.Form标签可用属性 action 用于处理表单信息的应用程序的地址method 浏览器用来提交表单的HTTP方法，常用的get/post。 get 对应...
H5之input属性
qq_46179838的博客
12-02 3707
文章目录一、常用属性1、信息提示框placeholder2、单选框radio、多选框checkbox3、提交 submit（需要在form标签里面使用）二、不常用的（兼容性问题）（一）、Calender类1、file 选择文件上传2、data 选择日期（兼容性：Chrome支持，Safari、IE不支持）3、time 选择时间（兼容性：Chrome支持，Safari、IE不支持）4、week 选择某年某周（兼容性：Chrome支持，Safari、IE不支持）5、datetime-local 选择年月
分享一个H5原生form表单的checkbox特效代码
09-28
这个动画效果通过`@keyframes`规则定义，名为`growCircle`，它在不同时间点改变了元素的`transform`属性（缩放比例和透明度），使得圆圈在选中时有渐显的效果。 `<input type="checkbox">`本身是不可见的，通过设置...
H5表单美化
10-26
h5+css3做的表单美化，方便修改，快来试试吧！！！！！！！！！
H5常用的表单属性
weixin_42436735的博客
06-11 647
H5新增表单属性 属性值 说明 type=“email” 限制用户输入必须为Email类型 type=“url” 限制用户输入必须为URL类型 type=“date” 限制用户输入必须为日期类型 type=“time” 限制用户输入必须为时间类型 type=“month” 限制用户输入必须为月类型 type=“week” 限制用户输入必须为周类型 type=“number” 限制用户输入必须为数字类型 type=“tel” 手机号码（不限制只能输入数字，因为有些特
HTML5 之 Form 标签
无
08-20 4691
概述   form 是块级双标签，用于指定一个表单区域，并向服务器提交信息。 属性 常用属性 action：指定表单提交的URL，表单内提交按钮的formaction属性会覆盖此属性 enctype：指定表单的数据编码方式，表单内提交按钮的formenctype属性会覆盖此属性 method：指定表单的请求方式，表单内提交按钮的formmethod属性会覆盖此属性。另外若表单在dialog元素中，指定method为dialog将在提交时关闭模态框，详细参考 target：表示表单提交时于何处响应，表单内.
0330-【form表单】常用属性·新增属性·特殊属性
LPDFIGHT的博客
03-30 748
0330-【form表单】常用属性·新增属性·特殊属性
HTML5 from表单
sshhzyq的博客
10-16 271
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <!-- form：向服务器提交数据时使用 action:提交服务器的地址 method:提交方式 get： 表单数据会在地.
html5 from表单
b422761838的专栏
10-15 544
Title Volvo Saab
H5中form表单属性以及内容设计
小小大青春
12-28 981
关于form表单容器中属性： form：表单容器标签 input：输入框 select：下拉框 textarea：文本域
form表单(H5复习)
qq_44858021的博客
07-25 495
表单是一个包含表单元素的区域 表单元素是允许用户在表单中输入的内容,比如:文本域textarea,下拉列表,单选框radio-button,复选框checkboxes 表单使用表单标签<form>来设置 HTML表单标签 <form> 定义供用户输入的表单 <input> 定义输入域 <textarea> 定义文本域(一个多行的输入控件) ...
HTML5-form表单总结
最新发布
a_2373179473的博客
05-06 644
总结html5---form标签，input标签，textarea标签，select标签的相关用法，form标签是表单元素（文本框，密码框，下拉列表框等等），一般由input，textarea，select标签构成，需要放到form标签内使用。
HTML5表单元素详解：form、input与表格的使用与属性
`<form>` 元素是表单的核心，其语法包括开始标记`<form>`，内容可以包含各种表单域元素，如`<input>`、`<textarea>`、`<select>`和`<option>`等，以及用于定义表单行为的属性，如`action`（指定表单提交的目标地址...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值