位置: IT常识 - 正文

form基础表单总结(form表单使用)

编辑:rootadmin
form基础表单总结 一、form表单用户搜集用户输入内容。

推荐整理分享form基础表单总结(form表单使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:form表单的常用属性,form表单基本元素,form表单的作用,form表单的作用,form表单的常用属性,form表单的常用属性,form表单使用,form表单使用,内容如对您有帮助,希望把文章链接给更多的朋友!

form表单的相关属性:

1.action:此属性表示提交表单时要执行的操作,通常是将表单数据提交到服务器处理表单数据的文件脚本中。

2.target:此属性表示在提交表单之后,服务器相应数据在何处显示。

默认值是_self,表示在当前窗口显示,值_blank表示在新窗口中显示。

3.method:此属性表示提交表单时要使用的HTTP方法。

可选值有get和post两种,默认值是get。

get与post的区别:

getpost表单数据以键值对的方式追加到URL中表单数据不会追加到URL,回附加到HTTP请求的正文中URL的长度受到限制(2048个字符)没有限制用于提交非敏感数据可提交敏感数据(如密码)

4.autocomplete:此属性表示是否开启表单自动补全,如果开启则浏览器会根据之前用户输入的值自动补全值。默认是开启的,可选值值有on(开)、off(关)。

5.novalidate:此属性表示表单提交时是否不进行表单验证,如果设置,则表示不进行表单验证。

默认是进行表单验证的。

<form target="_self" method="get" autocomplete="on"> 用户名:<br> <input type="email"> <input type="submit"></form>

email在提交时会进行验证邮箱格式是否正确,如果不正确,则不会进行提交并给予提示。

如果设置了novalidate属性且为真,则不会进行表单验证。

<form target="_self" method="get" autocomplete="on" novalidate="true"> 用户名:<br> <input type="email"> <input type="submit"></form>form基础表单总结(form表单使用)

 二、表单的相关元素

1.ladel标签 

ladel标签改进了对鼠标用户的可用性,它能够使鼠标点击标签的文本触发输入框获取焦点。也能够使按钮触发点击事件。

其中label标签的for属性指定的字段要与相应input标签的id字段相同,才能生效。也可以不设置for和id字段,则包裹内生效。

总之:如果label标签没有包裹input标签,则必须设置for和id对应字段才能生效;如果label标签包裹了input标签,则可以不设置for和id字段也会生效(注意是都不设置)。

<form target="_self" method="get" autocomplete="on" novalidate="true"> <label>用户名(不包裹,不使用for和id)</label><input type="text"><br> <label for="myInput1">用户名(不包裹,使用for和id)</label><input type="text" id="myInput1"><br> <label>用户名(包裹,不使用for和id)<input type="text"></label><br> <label for="myInput2">用户名(包裹,使用for和id)<input type="text" id="myInput2"></label></form>

 2.input标签

input元素可以通过设置不同的type属性值,显示不同的状态。input标签通常要设置name字段以指定向服务器提交字段时的名称、设置value字段表示提交值。

type值作用相关属性介绍text普通文本输入框设置name属性表示提交数据名称;value表示输入初始值password密码输入框,默认输入值不可见,*号代替设置name属性表示提交数据名称;value表示输入初始值submit定义提交form表单提交按钮设置value属性表示按钮显示名称,不设置默认显示"submit"radio单选按钮设置name和value属性表示相关提交数据,并且同一name属性值表示为一组内容;设置checked属性表示直接选中checkbox多选按钮设置name、value、checked属性作用同radiobutton使用input定义普通按钮设置value表示按钮显示名称<form target="_self" method="get" autocomplete="on" novalidate="true"> <label for="myInput1"> 用户名:<input type="text" id="myInput1" value="张三"> </label><br> <label for="myInput2"> 密码:<input type="password" id="myInput2" value="123456789"> </label><br> <label> 性别: 男:<input type="radio" name="radio1" value="男"> 女:<input type="radio" name="radio1" value="女"> </label><br> <label> 爱好: 看剧:<input type="checkbox" value="看剧" name="hobby"> 追番:<input type="checkbox" value="追番" name="hobby"> 打游戏:<input type="checkbox" value="打游戏" name="hobby"> 内卷:<input type="checkbox" checked value="内卷" name="hobby"> </label><br> <input class="btn" type="button" value="我是按钮"><br> <input type="submit" value="文本显示(提交)"></form>

HTML5新增的输入类型:

类型作用展示number限制输入为数字才能生效email限制输入为邮箱才能生效color获取焦点后会弹出颜色选择器date日期选择器会出现在输入框中range能够显示滑块字段month日期选择器(月份)week日期选择器(周)time时间选择器datetime时间选择器测试的时候没有生效datatime-clocle日期选择器tel电话输入url在提交时能够自动验证 url 字段。search用于搜索字段(搜索字段的表现类似常规文本字段)

input的输入限制属性:

属性描述disabled规定输入字段应该被禁用。max规定输入字段的最大值。maxlength规定输入字段的最大字符数。min规定输入字段的最小值。pattern规定通过其检查输入值的正则表达式。readonly规定输入字段为只读(无法修改)。required规定输入字段是必需的(必需填写)。size规定输入字段的宽度(以字符计)。step规定输入字段的合法数字间隔。value规定输入字段的默认值。

3.select标签与option标签

<select>用于包裹<option>生成下拉选择框。name属性指定提交名称,id可以配合<label>的for属性实现鼠标点击优化。

4.fieldset标签与legend标签

<fieldset>可用于数据分组,<legend>可以设置标题。使用fieldset分组的表单将会显示区别于部分组的样式,如 被边框包裹。

5.textarea标签

<textarea>表示一个多行纯文本编辑器,可以用于用户输入。可以设置id属性与<label>实现鼠标点击优化,cols和rows属性可以设置编辑器显示大小。

<form> <fieldset> <legend>填写用户信息</legend> <label for="user">用户名:</label> <input type="text" id="user"><br> <label for="password">密码:</label> <input type="text"> </fieldset> <label for="mySelect">我的select</label><br> <select id="mySelect" name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> </select><br> <label for="myText">我的textarea</label><br> <textarea name="textarea" id="myText" cols="30" rows="10"></textarea></form>

本文链接地址:https://www.jiuchutong.com/zhishi/288071.html 转载请保留说明!

上一篇:拉姆绍的Wimbachklamm峡谷,德国巴伐利亚 (© Westend61 GmbH/Alamy)(拉姆绍在哪里)

下一篇:最早的全中文手机(中文最早出现的时期)

  • 苹果平板A2602是什么型号(苹果平板a2602是多大尺寸屏幕)

    苹果平板A2602是什么型号(苹果平板a2602是多大尺寸屏幕)

  • 名下已有五个QQ怎么注销(已经实名5个qq)

    名下已有五个QQ怎么注销(已经实名5个qq)

  • 央视频怎么看回看(央视频怎么看回放卫视)

    央视频怎么看回看(央视频怎么看回放卫视)

  • 小米10与华为mate30的对比(小米10与华为mate20pro)

    小米10与华为mate30的对比(小米10与华为mate20pro)

  • 荣耀30pro充电一般多长时间充满(荣耀30pro充电一直是0)

    荣耀30pro充电一般多长时间充满(荣耀30pro充电一直是0)

  • 华为手机的控制中心在哪里(华为手机的控制中心找不到了怎么办)

    华为手机的控制中心在哪里(华为手机的控制中心找不到了怎么办)

  • 三星s20ultra怎么截屏(三星s20ultra怎么缩小屏幕)

    三星s20ultra怎么截屏(三星s20ultra怎么缩小屏幕)

  • 芒果tv签到21天怎么领会员(芒果tv签到21天送会员没到账)

    芒果tv签到21天怎么领会员(芒果tv签到21天送会员没到账)

  • 微信自动加群的软件

    微信自动加群的软件

  • 三星S20三围尺寸(三星s20三围尺寸是多少)

    三星S20三围尺寸(三星s20三围尺寸是多少)

  • ipad有低电量模式吗(ipad2020低电量模式)

    ipad有低电量模式吗(ipad2020低电量模式)

  • 华为nova7se什么时候上市的(华为nova7se什么时候上市的价格)

    华为nova7se什么时候上市的(华为nova7se什么时候上市的价格)

  • 笔记本cpu温度80度正常吗(笔记本cpu温度80会伤电脑吗)

    笔记本cpu温度80度正常吗(笔记本cpu温度80会伤电脑吗)

  • ipadpencil第一次线充要多久(ipadpencil第一次充电多久)

    ipadpencil第一次线充要多久(ipadpencil第一次充电多久)

  • 笔记本电脑2g独显什么意思(笔记本电脑2G独立显卡玩天龙八部可以吗)

    笔记本电脑2g独显什么意思(笔记本电脑2G独立显卡玩天龙八部可以吗)

  • 小米9手机一直循环重启(小米9手机一直闪屏怎么办)

    小米9手机一直循环重启(小米9手机一直闪屏怎么办)

  • 电脑快捷删除键该如何操作(电脑快捷删除键表格)

    电脑快捷删除键该如何操作(电脑快捷删除键表格)

  • 哪些领域与5G有关(哪些领域与5g有关系)

    哪些领域与5G有关(哪些领域与5g有关系)

  • 手机后盖缝隙多大算正常(手机后盖缝隙多大)

    手机后盖缝隙多大算正常(手机后盖缝隙多大)

  • wifi5g是什么(wifi5G是什么意思)

    wifi5g是什么(wifi5G是什么意思)

  • word图片统一调整大小(word图片统一调图片大小)

    word图片统一调整大小(word图片统一调图片大小)

  • 苹果11手机信号不好怎么办(苹果11手机信号下面四个点怎么设置的)

    苹果11手机信号不好怎么办(苹果11手机信号下面四个点怎么设置的)

  • 苹果xr怎么分屏两个app(苹果xr怎么分屏小窗口)

    苹果xr怎么分屏两个app(苹果xr怎么分屏小窗口)

  • 苹果11怎么录屏幕视频(苹果11怎么录屏没有声音)

    苹果11怎么录屏幕视频(苹果11怎么录屏没有声音)

  • 手机银行动态口令怎么获取(手机银行动态口令失效怎么办)

    手机银行动态口令怎么获取(手机银行动态口令失效怎么办)

  • 抖音时间锁密码是多少(抖音时间锁密码一般是多少)

    抖音时间锁密码是多少(抖音时间锁密码一般是多少)

  • 拼多多拍视频怎么发送(拼多多拍视频怎么配音乐)

    拼多多拍视频怎么发送(拼多多拍视频怎么配音乐)

  • 如何查看电脑主板型号(如何查看电脑主机名)

    如何查看电脑主板型号(如何查看电脑主机名)

  • 华为rcs可以关闭吗(rcvd怎么关闭)

    华为rcs可以关闭吗(rcvd怎么关闭)

  • 移至通知信息是什么意思(短信移至通知信息)

    移至通知信息是什么意思(短信移至通知信息)

  • 【登录界面】vue、element-ui登录界面模板(vue登录页面点击登录进入首页)

    【登录界面】vue、element-ui登录界面模板(vue登录页面点击登录进入首页)

  • 金税盘服务费全额抵扣
  • 外部奖励与内部奖励
  • 工程款给付协议
  • 现金流量套期与什么无关
  • 企业所得税计算例题
  • 收到赠送的商品并销售
  • 新政府会计制度下属于负债类科目的是
  • 换出资产为存货为什么不
  • 股东借款超过一年个人所得税
  • 居民企业股权转让所得
  • 金税三期报税软件
  • 一般纳税人进项税额怎么算
  • 生产车间人员工资属于什么费用
  • 仓库常用包材
  • 第三方用人单位应承担哪些责任
  • 房产过户的相关问题
  • 其他业务活动包括
  • 材料采购定期结算表
  • 小规模纳税人出租房屋增值税税率是多少
  • 设备安装和设备出售的税率一样吗
  • 当期销项税额等于什么乘以什么
  • 小微企业所得税优惠政策
  • 应交税费包括了增值税吗
  • 外币账户利息结汇
  • 房产免租期间缴纳房产税吗
  • 公司注销的时候注册资金都没交可以吗?
  • 预提材料运费怎么计算
  • 华为nova9值得买吗知乎
  • 抵押和质押的区别主要表现在哪些方面
  • 直接计入当期利润的利得,即企业非日常
  • 欠税不交的后果 个人
  • 赠品促销怎么做
  • 跨年退税怎么处理
  • Win10无法访问局域网计算机
  • ixapplet.exe - ixapplet是什么进程 有何作用
  • win11预览版选哪个
  • 哪些费用可以计入开办费
  • php-cgi
  • 建筑业统一发票真伪查询
  • 金融企业贷款损失准备金计提比例
  • thinkphp框架作用
  • 即征即退进项税额分摊方法
  • 退教育附加税会计分录
  • 前端处理map
  • 电脑培训网络教学
  • 看望职工家属可以计入福利费吗
  • 支付中间人佣金违法吗
  • 人力资源公司的招聘专员怎么样
  • 一切皆对象什么意思
  • .dot python
  • mysql的字符串
  • 交强险必须要买驾乘险才能投保
  • 工伤在门诊的收据能报销吗
  • 专用发票跨月退税怎么办
  • 跨年发票账务处理怎么做
  • 背书转让的操作
  • 免租期可以退房吗
  • 进项税额转出后续处理
  • 小规模纳税人可以转为一般纳税人吗?
  • 非限定性净资产是什么意思
  • 预计所有者权益增长率
  • 当期损益包括哪些科目指的
  • 什么叫商业会计
  • mysql数据库详解
  • mysql 含有关键字
  • linux清屏幕命令
  • ubuntu误删除内核
  • win8中文版怎么升级到win10
  • win7禁用administrator
  • winedt中文界面
  • vs2013怎么配置环境
  • javascript操作dom对象
  • Unity3D实现Billboard效果
  • js中倒计时器怎么实现
  • python写脚本教程
  • 山东省税务局网上办税服务厅
  • 材料费增值税发票几个点
  • 朝阳区地方税务局官网
  • 武汉车船使用税收费标准
  • 湖南电子税务局网上办税大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设