05form表单

2022-04-05 14:02:31 阅读：121 来源： 互联网

 <!--表单: form, 块级. 将表单中用户输入的数据采集后发送给服务器后台.-->
<!--
 form 标签使用  块标签
 1）action  常用，数据提交的目标地址/某个页面   //某个页面的地址
 2) method  常用，提交数据请求方式
 属性值：
 1）get,默认值
 携带的数据有上限（200byte）
 数据携带的方式：以参数字符串的格式携带的请求地址后面
 安全性较低
 2）post,常用值
 携带数量无上线
 数据携带方式：以form data的格式携带请求内部
 安全性较高
 配合表单使用的，用于采集数据的标签
 1）input:输入标签
 标签属性：
 1）type:特常用，设置input的具体类型
 属性值：（常用的9种）
 i.submit:提交按钮
 注：通常会设置value
 注：不同的浏览器中，默认的按钮名字不一致
 注：只有出现在form中时才有效
 ii.text:默认值。文本框
 注：需要传输数据时，一定要设置name属性
 iii。password :密码框
 注：需要传输数据时，一定要设置name属性
 iV,radio:单选框
 注；在同一个选择选项必须设置相同的name
 注：选项的提交文字需要写在对应的input后面
 注：必须为每个选项设置value
 V, checkbox: 多选框
 注意事项与radio一致
 vi, file:文件选择框
 注：需要传输数据时，一定要设置name属性
 vii.reset：重置按钮
 注：通常会设置value
 注：只有出现在gorm中时才有效
 viii:button :普通按钮
 注：必须设置value
 ix.hidden:隐藏域。无法被看到，通常配合disable使用
 注：一定设置value
 注：一定设置name
 注：value的值要与禁用的input的value一致
 其它type的值：见作业01

 2) value:标签的内容，或者，按钮的名称
 3）maxlength: 设置可以输入的最大字符数量
 4) name:用于设置数据传输时的参数名称
 5) checked： 用于设置单选或多选的默认选项
 6）disable:禁用
 数据无法修改，不能选中，数据无法传输，视觉提示清晰
 7）readonly:只读
 数据无法修改，视觉提示不够清晰
 8) required: 必填
 9) placeholder:提示
 10）size:输入框的长度
 2）select:下拉框标签
 注1：需要传输数据时，一定要设置name属性
 注2：select 可以使用disable,readonly
 select的子元素：option:下拉框选项
 注：option必须设置values
 注：option必须设置标签内容
 3）textarea:文本域标签
 注：需要传输时一定要设置name
 注：没有标签名，替代的为文本框内容
 注：填写内容时不要回车
 注：可以使用disable和readonly
 cols和rows设置宽高
 -->

 <form action="./用于接收表单数据的页面.html" method="get">
     <div></div>
     请输入用户名:<input type="text" value="12345" name="userName" disabled>
     <input type="hidden" name="userName" value="12344">
     </div>
     <div></div>
     请输入密码:<input type="text" value="" name="password" maxlength="12" placeholder="6-18" size="18">
     </div>
     <div>
         <input type="date" name="birthday">
         <input type="time" name="time">
         <input type="datetime-local">
     </div>
     <div>
         性别:
         <input type="radio" name="gender" value="1">男
         <input type="radio" name="gender" value="2">女
         <input type="radio" name="gender" checked value="0">保密
     </div>
     <div>
         爱好:
         <input type="checkbox" name="hobby" value="java">java
         <input type="checkbox" name="hobby" value="英语" checked>英语
         <input type="checkbox" name="hobby" value="游戏" checked>游戏
         <input type="checkbox" name="hobby" value="姑娘">姑娘
     </div>
     <div>
         <input type="file" name="headImg" value="上传头像">
     </div>
     <div></div>
     请输入密码:<input type="submit" value="提交">
     </div>
     <!--<span>
         <input type="submit" value="修改">
     </span>-->
     <span>
         <input type="reset" value="重置">
     </span>
 </form>

标签：05form,name,标签,value,表单,传输数据,设置,属性
来源： https://www.cnblogs.com/wgbl/p/16102145.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

05form表单