资讯专栏INFORMATION COLUMN

构建静态页面 之 [ 表单 ]

snifes / 2381人阅读

摘要:表单表单元素元素表示设置表单属性设置接收表单的指定服务器端的地址路径属性表示发送给服务器端的方式属性值默认值将提交的数据添加到地址栏中进行提交有限制,不安全属性值将提交的数据绑定在表单中进行提交没有限制,相对安全属性提交表单时要设

表单 表单元素
元素

表示设置表单

action属性 - 设置接收表单的指定服务器端的地址路径

method属性 - 表示发送给服务器端的方式

get属性值(默认值) - 将提交的数据添加到地址栏中进行提交(有限制,不安全)

post属性值 - 将提交的数据绑定在表单中进行提交(没有限制,相对安全)

name属性 - 提交表单时要设置name属性,不然无法提交表单




    
    

输入框 元素

表示设置表单中的搜索框

type属性 - 表示定义什么类型的输入框

text属性值 - 文本框

password属性值 - 密码框

email属性值 - 邮件输入框(会有格式要求)

url属性值 - 网址输入框(会有格式要求)

number属性值 - 定义数字控件(只能输入数字)



输入框的属性

value属性 - 可以用来 设置 或 获取 输入框中的数据内容

placeholder属性 - 可以提供使用输入框的相关信息

autofocus属性 - 可以自动获取焦点,不用点击输入框就可以先选择输入框

disabled属性 - 表示当前输入框不可用

readonly属性 - 表示当前输入框只能读,不能输入内容

表单控件

元素 - 可以设置表单中的控件

type属性 - 定义控件的类型

date属性值 - 定义日期控件

month属性值 - 定义月份控件

week属性值 - 定义周期控件

color属性值 - 定义选择颜色的控件


按钮

元素 - 可以设置表单中按钮,用于实现提交表单、或其他功能

type属性 - 设置按钮的类型

submit属性值 - 设置提交按钮(提交表单)

reset属性值 - 设置重置按钮(重置输入框中的内容)

button属性值 - 设置普通按钮

图像组件

元素 - 可以定义图像组件

type属性 - 设置图像组件

image属性值 - 定义图像组件

src属性 - 引入图像的路径

通过图像组件引入的图片具有提交表单的作用


单选框和多选框

单选框 - type属性 的 radio属性值 表示设置单选框

多选框 - type属性 的 checkbox属性值 表示设置多选框

通过 name属性 将多个多选框分为一组

checked属性 - 表示默认被选择项


我是谁 我在那 我要干啥
手机 电脑 游戏机
文件域

文件域 - 表示允许用户在页面中打开选择本地文件、上传本地文件

accept属性 - 设置当前接收文件的类型

multiple属性 - 可以同时接收多个文件

enctype属性 - 设置提交表单时的方式

application/x-www-form-urlencoded属性值(默认值) - 表示以数据的方式提交表单

multipart/form-data属性值 - 表示将表单以文件的方式提交(在文件域中使用时可以实现文件上传)

实现文件上传

enctype属性的属性值只能为 multipart/form-data

method属性的属性值只能为 post



文本域和隐藏域


下拉列表

组合表单元素

t元素 - 表示对表单中的组件进行分组

元素 - 表示对分组的组件设置标题

元素 和 元素 需要配合使用


查询
表单验证

表单验证 - 在表单提交前对表单中数据进行验证

符合验证 - 提交表单

不符合验证 - 给出提示,按条件修改

验证属性

required属性 - 表示验证当前组件中的内容是否为空

minlength属性 - 表示当前组件中的内容(文本)最小长度(字或字母的个数)

maxlength属性 - 表示当前组件中的内容(文本)最大长度(字或字母的个数)

min属性 - 表示当前组件中的内容是否小于min的值(使用在数字输入框)

max属性 - 表示当前组件中的内容是否大于min的值(使用在数字输入框)

step属性 - 表示当前组件中的内容每次增加或减少的数值(使用在数字输入框)

表单中也有一些输入框自带验证效果

邮件输入框 - 按照邮箱地址的要求输入

网址输入框 - 按照网址的要求输入

数字输入框 - 只能输入数字

颜色输入框 - 只能规定颜色

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/55083.html

相关文章

  • 构建静态页面 [ 表单 ]

    摘要:表单表单元素元素表示设置表单属性设置接收表单的指定服务器端的地址路径属性表示发送给服务器端的方式属性值默认值将提交的数据添加到地址栏中进行提交有限制,不安全属性值将提交的数据绑定在表单中进行提交没有限制,相对安全属性提交表单时要设 表单 表单元素 元素 表示设置表单 action属性 - 设置接收表单的指定服务器端的地址路径 method属性 - 表示发送给服务器端的方式 ge...

    zhangwang 评论0 收藏0
  • Formik与antd-mobile的移动端的表单实践(下)

    摘要:会在用户每次按下提交时进行一次完整校验或更改时进行一次单表单项的验证。传入为表单值与外部自定义传入的返回值为一个对象的表单提交处理而表单提交的处理,和我们做表单验证类似,只需要参考官方示例我们就可以简单的实现表单提交功能。 大家好,工作闲暇之余又来续写一下Formik这个库的文章了,这次文章主要内容为如下: 更多表单组件的封装示例 单选/多选按钮 选择器 时间选择器 文本输入框 ...

    sihai 评论0 收藏0
  • Spring旅第八站:Spring MVC Spittr舞台的搭建、基本的控制器、请求的输入、表

    摘要:请求旅程的第一站是的。的任务是将请求发送控制器控制器是一个用于处理请求的组件。处理映射器根据请求携带的信息来进行决策。这样的结果就是,只能找到显示声明在配置类中的控制器。 构建Spring Web应用 说明 如果你有幸能看到。 1、本文参考了《Spring 实战》重点内容,参考了GitHub上的代码 2、本文只为记录作为以后参考,要想真正领悟Spring的强大,请看原书。 3、在一次...

    maybe_009 评论0 收藏0
  • Spring实战5-基于Spring构建Web应用

    摘要:的框架用于解决上述提到的问题,基于模型,可以帮助开发人员构建灵活易扩展的应用。在这一章中,将专注于构建该应用的层,创建控制器和显示,以及处理用户注册的表单。类有两个静态接口,代表两种模拟服务的方式独立测试和集成测试。 主要内容 将web请求映射到Spring控制器 绑定form参数 验证表单提交的参数 写在前面:关于Java Web,首先推荐一篇文章——写给java web一年左右...

    sourcenode 评论0 收藏0
  • 最终篇:简洁易懂,初学者挑战学习Python编程30天 (五)

    摘要:和是最受欢迎的。虚拟环境将允许将项目依赖项与本地机器依赖项隔离开来。文件将是项目中的主文件。运行后,检查本地主机。在中创建一个名为的文件夹,并创建一个名为的文件夹。部署创建帐户为前端和全栈应用程序提供免费部署服务。 ...

    1fe1se 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<