form表单总结

已于 2023-11-14 09:00:17 修改
阅读量19 收藏
点赞数
分类专栏： HTML CSS JS 文章标签： 前端
于 2023-11-14 08:50:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65535771/article/details/134390614
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <form id="" name="" action="提交服务器的路径" method="提交方式 post || get(默认)">

        <!-- readonly只读 后台可以获取到该控件的值 disable失效 后台获取不到 -->

        <!-- text文本框按钮 placehoder默认文本框的字 -->  

        <input type="text" list="skill" maxlength="6"  placeholder="请输入"  readonly>

       <!-- 密码框-->  

        <input type="password">

        <!-- radio单选框 实现单选name值必须相同 value在单选里是向后台提交的值-->  

                                                                <!--lable标签 点击这个文字时相当于点击了id=mid的件-->

        <input type="radio" name="sex" id="mid" checked value="m">

        <label for="mid">男</label>

        <input type="radio" name="sex" id=""> 女

        <!-- checkbox多选框 name值也必须相同 后台通过相同的name值获取 -->

        <input type="checkbox" name="skil" id=""> 吃饭 <p></p>

        <input type="checkbox" name="skil" id="" > 洗衣服<p></p>

        <input type="checkbox" name="skil" id="">  做饭

        <!-- 下拉框 选择对应的城市 后台获取对应的value值-->

        <select name="" id="">

            <option value="">请选择城市</option>

            <option value="1" >大连</option>

            <option value="2">北京</option>

            <option value="3">沈阳</option>

        </select>

        <!-- 文本域 -->

        <textarea name="" id="" cols="50" rows="20"></textarea><br>

        <!-- 文件对象 -->

        <input type="file"><br>

        <!-- 隐藏域 常用于不想显示出来 但后台需要获取的数据 例如修改时候的账户id-->

        <input type="hidden">

        <!-- 日期 -->

        <input type="date" name="" id="" value="2023-10-10"><p></p>

        <!-- 按钮 -->

        <input type="button" name="" id="" value="按钮">

        <!-- 重置 恢复默认状态 -->

        <input type="reset" value="重置">

        <!-- 提交  根据action定义的路径提交到服务器-->

        <input type="submit" name="" id="" value="提交" >

        <!-- 取色板 着色器 -->

        <input type="color" name="" id="">

        <!--数字控件 value默认值  min最小值 max最大值 -->

        <input type="number" name="" id="" value="1" min="1" max="5">

        <!-- 滑块 -->

        <input type="range" name="" id="" min="0" max="100" step="1">

        <!-- 日期加时间 定时的时候用 -->

        <input type="datetime-local">

        <!-- 邮箱地址 -->

        <input type="email" name="" id="">

        <!-- 地址 -->

        <input type="url" name="" id="">

    </form>

    <!-- 一个页面可以有多个表单 -->

        <!-- fieldset 对表单控件进行分组 划分出来-->

        <!-- disabled 该组内所有控件都是失效的 -->

</form>

            <fieldset disabled>

            <legend style="margin-left: 300px;">登录模块</legend>

            <label for="username">用户名</label>

            <input type="text" name="" id="username">

            <label for="password">密码：</label>

            <input type="password" name="" id="password">

        </fieldset>

    </form>

    <!-- datalist 规定了 <input> 元素可能的选项列表 -->

     <!--search用于查询文本-->                              <!--list时预定义选项一般绑定datalist中id-->

    <input type="search" name="" list="skill" placeholder="请输入搜索的内容">

    <datalist id="skill">

            <option value="javaSE"></option>

            <option value="css"></option>

            <option value="javaWeb"></option>

    </datalist>

</body>

</html>

小九要学代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
表单 form
weixin_46376652的博客
03-07 93
form action method：提交方式get/post name input 文本框行内块元素 password：密码框 submit：登录 reset：重置 redio：单选 name属性相同 checked disabled file：文件 type="color"type="week" type="month" type="date"type="time" type="range"type="number"autofocus required autocomplete placeholder
form表单
m0_66397707的博客
03-19 439
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
HTML form表单提交 总结
qq_095的博客
09-04 1854
HTML Form表单提交 总结 随着HTML5的兴起，前端越来越多样化，比如表单的提交，现在就有多种方式可以选择，下面总结一下常见的表单提交方式。 一、最基本的表单提交。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单提交示例 - 基本表单提交...
form基础表单总结
热门推荐
qq_48113035的博客
03-07 1万+
1.
form表单知识点总结
zplike的博客
06-12 1366
【】表单是网页中最常用、最重要的一部分内容。不管是使用搜索引擎，还是使用电子邮箱， 或者留言板、论坛，都离不开表单。 【】创建表单，使用&lt;form&gt;&lt;/form&gt;标签，该标签具有如下属性：     1、action：用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。当用户提交表单后，由后台的server.jsp程序来处理用户提交的表单。     2、meth...
Django框架获取form表单数据方式总结
09-17
本文将详细探讨Django如何获取并处理各种类型的表单数据，包括文本输入、密码输入、单选按钮、复选框、单选下拉框以及多选下拉框。 1. **文本输入和密码输入** - 文本输入：`<input type="text" name="name">` - ...
正则表达式总结-form表单
01-27
总结了form表单，以及部分正则表达式，正则表达式很多，只总结了部分常用的
jquery实现ajax提交form表单的方法总结
10-26
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
基于javascript的Form表单验证
10-20
本文将深入探讨如何使用JavaScript进行基于Form表单的验证。表单验证是确保用户输入数据有效性和完整性的关键步骤，可以防止无效数据提交到服务器，从而提高用户体验并减少服务器处理错误数据的压力。 首先，我们来...
vue 解决form表单提交但不跳转页面的问题
10-16
总结一下，要在Vue中解决表单提交但不跳转页面的问题，主要步骤包括： 1. 使用`@submit.prevent`修饰符绑定提交事件，并调用自定义的方法。 2. 在自定义方法中，使用`event.preventDefault()`阻止默认的表单提交行为...
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 355
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1383
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 459
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 453
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
快速压缩前端项目
lyd的博客
06-15 329
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 347
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
SortTable.js + vxe-table 实现多条批量排序
小先生编程
06-12 699
环境: 功能: 实现表格拖动排序，支持单条排序，多条排序 实现思路: 官网只有单条排序的例子，网上也都是简单的使用，想要实现多条排序，就要结合着表格的复选框功能，在对其勾选的行统一计算！ 最终效果: 实现代码
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
最新发布
qq_61798306的博客
06-18 141
【element 】修改下拉菜单
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 854
Vue在表单校验中trigger属性指定何时触发校验规则
form表单model
09-13
在Ant Design Vue中，form表单的model属性是用来绑定表单数据的。通过将model属性设置为一个对象，可以将表单控件的值与该对象中的属性进行双向绑定。这样，在表单数据发生变化时，model对象的属性也会相应地更新。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值