FORM表单及其属性

最新推荐文章于 2024-07-17 22:23:53 发布
最新推荐文章于 2024-07-17 22:23:53 发布
阅读量4.7k 收藏 3
点赞数 2
分类专栏： H5 文章标签： H5 表单 form
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaolimulin/article/details/69588947
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <h1 style="text-align: center">表单form</h1>
    <title>css常用选择器</title>
</head>
<body>
<form action="contact04.html" method="get" id="ddl">
    <!--action 用来指定数据要提交到哪里去
               method 指定网络请求的方式
             （1） get请求  传递到服务端的数据以追加到url路径后的方式发送
                     规则 所有数据都在？之后，多个数据以&符号进行分割
                     get请求缺点   网络请求数据直接暴露在url里；敏感数据容易被窃取 属绝传输量小
                     post 传递到服务端的数据隐藏在请求体里，隐藏敏感数据
                     post请求的优点：传输的数据隐秘性比较好，数据传输量基本上没有什么限制-->
    <!--input的类型      name属性必须添加！！！！为了正常的提交数据到服务器
    text单行文本
    password 密码 输入的文本一隐藏的方式显示
    radio 单选框 护持的效果通过同名name来实现， value是提交数据到服务器是方便组成键值对-->
    <!--tabindex=""可以更改tab键的跳转顺序-->
    <!--
          autocomplete 自动完成功能
          autofocus 自动获取焦点
          required 必填
          placeholder 提示
          -->
<!-- 能够不用table标签就别用  浏览器运行速度非常慢慢慢慢-->
   <fieldset>
       <legend>用户注册用户注册用户注册用户注册用户注册用户注册用户注册用户注册用户注册</legend>
       <table align="center">
           <tr>
               <td>会员名：</td>
               <td><input type="text" name="name" autocomplete="on" autofocus required
                       placeholder="填写会员名" value="朝思暮林" readonly="false"/> </td>
               <td>（可包含a-z，0-9和下划线）</td>
           </tr>
           <tr>
               <td>密码1：</td>
               <td><input type="password" name="pwd" tabindex="1" autocomplete="on"/></td> <!--name属性一定要有-->
               <td>（至少包含6个字符）</td> <!--tabindex="1" 这是tab键的跳转顺序-->
           </tr>
           </tr>
           <tr>
               <td>性别</td>
               <td>
                   <input type="radio" name="sex"/>男
                   <input type="radio" name="sex"/>女
               </td>
               <td>必填</td>
           </tr>
           <tr>
               <td>爱好</td>
               <td>
                   <input type="checkbox" name="hobby" value="basketball"/>篮球
                   <input type="checkbox" name="hobby" value="football"/>足球
               </td>
               <td>必填</td>
           </tr>
           <tr>
               <td><input type="submit"/> </td>
               <td><input type="reset"/> </td>
           </tr>
           <tr>
               <td><input type="file" name="file"/></td>
           </tr>
           <tr>
               <td><input type="button" value="putonganniu"/></td> <!--无法跳转-->
               <td><input type="image" src="../../img/qqzone.png"/> </td>
               <td>
                   <button>普通按钮</button>
               </td>
           </tr>
           <tr>
               <td>ez</td>
               <td>
                   <select name="idd" id="idd" multiple size="5"> <!--multiple可以多选-->
                       <option value="1">a</option>
                       <option value="2">b</option>
                       <option value="3">c</option>
                       <option value="4">d</option>
                       <option value="4">e</option>
                       <option value="4">f</option>
                       <option value="4">g</option>
                   </select>
               </td>
           </tr>
           <tr>
               <td colspan="3" align="center"><input type="submit"/></td>
           </tr>
           <tr>
               <td>协议</td>
               <td colspan="2">
                   <textarea name="xieyi" id="" cols="15" rows="3">sssssssssssss</textarea>
               </td>
           </tr>
       </table>
   </fieldset>
</form>
<hr/>
<input style="text-align: center" type="text" name="nick" placeholder="请输入昵称" form="ddl"/>

<form action="contact04.html" method="get">
    <fieldset>
        <table align="center">
            <tr>
                <td>邮箱</td>
                <td><input type="email" name="email"/></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="url" name="url"/></td>
            </tr>
            <tr>
                <td>日期</td>
                <td><input type="date" name="date"/></td>
            </tr>
            <tr>
                <td>时间</td>
                <td><input type="time" name="time"/></td>
            </tr>
            <tr>
                <td>月份</td>
                <td><input type="month" name="month"/></td>
            </tr>
            <tr>
                <td>星期</td>
                <td><input type="week" name="week"/></td>
            </tr>
            <tr>
                <td>滚动条</td>
                <td><input type="range" name="range"/></td>
            </tr>
            <tr>
                <td>颜色</td>
                <td><input type="color" name="color"/></td>
            </tr>
            <tr>
                <td><input type="submit"/></td>
            </tr>
            <tr>
                <td>下拉列表</td>
                <td>
                    <input id="mycar" list="cars"/> <!--datalist list两个要一样-->
                    <datalist id="cars">
                        <option value="BMW"></option>
                        <option value="Ford"></option>
                        <option value="Volov"></option>
                    </datalist>
                </td>
            </tr>
        </table>
    </fieldset>
</form>
<progress value="50" max="100"></progress>
<meter value="9" min="2" max="10"></meter> <!--温度值-->
</body>
</html>
朝思暮林
关注
专栏目录
form属性详解
m0_46355331的博客
08-09 2384
本文记录form的相关属性
form表单补充属性
jiayuannan的博客
05-15 383
之前学习了表单的基础属性，可以制作基础的表单样式，但还有一些表单的样式复杂，需要我们继续学习，接下来一起来学习一下表单的补充属性吧
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
热门推荐
CAINIAOQIANDUAN的博客
08-11 2万+
form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值： （单行文本输入框） （密码输入框） （单选框） （多选框） （提交按钮） （重置按钮） 或者按钮（空按钮） （下拉框选） （多行文本框） （1） 是表单的标签，所有的需要写在f...
HTML常见标签——表单form标签
最新发布
weixin_64294248的博客
07-17 1571
表单标签form用于收集、采集信息。可以用于用户登录、注册功能时，收集用户的账号、密码等信息。在开发过程中如果需要实现登录、注册、评论、留言、表白墙、聊天室等功能，可以使用表单标签。
form表单属性
OZCNO的博客
04-14 761
属性 值 描述 accept-charset charset_list 规定服务器可处理的表单数据字符集。 action URL 规定当提交表单时向何处发送表单数据。 autocomplete（H5） on、off 规定是否启用表单的自动完成功能。 enctype application/x-www-form-urlencoded、multipart/form-data...
js-form表单元素的自定义属性
weixin_33890526的博客
03-21 149
  form表单元素的自定义属性 CreateTime--2016年9月22日09:03:40 Author:Marydon 场景： &lt;script type="text/javascript"&gt; var name = "lisi"; 　　function test1 () { 　　　　var name = "zhang"; 　　　　function ...
<form>表单常用属性
weixin_30653097的博客
03-10 745
<form>表单常用属性有以下几种: name:用来标识这个表单,在javascript中可以通过 document.表单名 来取得这个表单 action:表示这个表单提交时的跳转路径 method:表示提交方式,可以选择post和get,默认为get方式.两种方式的区别: post:所有提交的参数都会隐藏,没有参数的大小限制,建议使用该方式 get:所有提交...
form表单的属性
qq_44543292的博客
04-08 3958
作者：赖信武 撰写时间：2019.4.5 form表单的属性：action与method. action.值为URL. 该属性规定当提交表单时向何处发送表单数据 实例： 下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 “form_action.asp” 的页面： URL可能的值： 绝对 URL - 指向其他站点（比如 src=“www.baidu.com”） ...
    Form表单
weixin_54835055的博客
05-26 251
Form表单 一、概念:bootstrap的表单控件使用了CSS的样式重置，使用这些Class类来自定义显示，确保在输入框上使用正确的type属性。 二、表单的提交 ①get方法是用来向服务器上获取数据，而post是用来向服务器上传递修改数据 ②form表单的属性action与method 属性 值 描述 action URL 规定当提交表单时向何处发送...
form表单中什么隐藏属性可以随表单提交
12-02
综上所述，我们可以得出结论：在form表单中，具有visibility=hidden或display=none属性的表单元素的数据都会被提交，而具有disabled=true属性的表单元素的数据则不会随表单一起提交。这在设计表单界面时非常有用，...
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
12-19
本篇文章将介绍如何使用正则表达式匹配`form`表单中的所有元素类型及其属性值，这对于网页抓取或数据分析非常有用。 首先，我们需要理解HTML表单的基本结构。一个典型的HTML`form`元素包括各种输入元素如`input`、`...
简单的form表单模板
01-16
本文将深入探讨“简单的form表单模板”及其相关知识点。 首先，我们需要了解HTML中的`<form>`标签。它是创建表单的基础，用于定义用户输入数据的区域。例如： ```html <form action="submit.php" method="post"> ...
HTML的form表单和django的form表单
09-18
Django的form表单会自动进行数据验证，如果输入不符合验证规则，`is_valid()`方法将返回False，并在表单的`errors`属性中存储错误信息。开发者可以自定义错误消息，例如在上面的`MyForm`类中，年龄字段的"required...
html用户输入用户交互之Form表单，及其input的type属性
angrynouse的博客
03-21 1253
**表单：**只要有用户输入的地方，就需要用到表单来进行交互，可以采集用户信息。 表单：容器（表单）+控件（输入框、提交按钮等） 容器中可以容纳各种控件 method: get | post是服务器进行交互 post与get区别：get提交少量数据，post提交大量数据；get提交的数据url可以看到，post提交的数据url看不到。所以post比get安全。 **表单：**表单标签 表单域 表单按钮 拿到表单数据之后，去请求服务器，服务器端做出响应，前端页面拿到信息后，处理反馈到网页，展示给用户。
target属性值
weixin_34301132的博客
12-31 296
有 4 个保留的目标名称用作特殊的文档重定向操作： _blank 浏览器总在一个新打开、未命名的窗体中加载目标文档。 _self 这个目标的值对全部没有指定目标的 &lt;a&gt; 标签是默认目标，它使得目标文档加载并显示在同样的框架或者窗体中作为源文档。这个目标是多余且不必要的。除非和文档标题 &lt;base&gt; 标签中的 target 属性一起使用。...
【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）
Fighting_hawk的博客
02-10 1万+
1. 掌握form表单的作用：提交数据。 2. 掌握form表单7种常用属性的作用与语法。 3. 掌握form表单9种常用元素的作用与语法。
form表单中几种属性
weixin_44001985的博客
05-02 9153
表单的主要功能是收集信息，一般分两部分：1.体现表单元素的HTML代码；2.客户端脚本 ，或是服务器用来处理用户所填写信息的程序。 action就是你表单要提交的地址。地址可以是请求后台的地址，如Servlet,Struts 等；也可以是提交到另一个页面的地址，如HTML，jsp等。 method是将表单的数据从浏览器传送到服务器的方法。即开始时浏...
常用表单属性
印象笔记搬家ing......
04-17 609
常用表单属性 form autocomplete 设置整个表单是否开启自动完成 on|off novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验 input: autocomplete 单独设置每个文本框的自动完成 autofocus 设置当前文本域页面加载完了过后自动得到焦点 placeholder 文本框占位符 required 限制当前input...
JavaScript Form表单字段元素对象属性详解
"本文详细介绍了JavaScript中的Form表单字段元素对象及其相关属性，以及JavaScript在网页中的作用、与其他语言的区别、嵌入网页的方式、基本语法和错误调试方法。" 在JavaScript中，Form表单字段元素对象是一组具有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值