form表单小知识

最新推荐文章于 2024-04-23 15:05:51 发布

qq_42786725

最新推荐文章于 2024-04-23 15:05:51 发布

阅读量130

点赞数

文章标签： for 表

本文链接：https://blog.csdn.net/qq_42786725/article/details/81203613

版权

<form action="表单数据提交地址"method="数据提交方法"></form>

为了往服务端提交数据，提交的数据清洗移动方便处理：
普通输入框需要添加name属性键值对完整。
非输入框需要添加name value属性保证键值对完整 name 还有分组作用
比如单选框，相同name是一组，单选框同一组选项有互斥效果
复选框也需要name属性表明当前多项是一组
通过get请求往服务端提交数据时，提交的数据会追加在URL地址后面以？
进行分隔，多个数据之间用&进行分隔
get 请求缺点：暴露敏感信息 传输信息有限
   优点：传输速度快
 post请求：传输的数据放在请求体中可以隐藏敏感信息传输数据没有限制
 缺点：传输数据慢
file   ：文件上传
按钮四个：
 type:reset       重置
      :submit      提交
      :image       提交
<button></button>   提交

select 下拉框
textarea 文字区块
fieldset 表单外框
legend    标题
Tabindex  1为开始索引

例题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
用户名：<input type="text" name="name" > <br>
&nbsp;&nbsp;&nbsp;密码：<input type="password" name="password"> <br>
&nbsp;&nbsp;&nbsp;性别： <input type="radio" name="sex" checked value="man">男
<input type="radio" value="woman" name="sex">女 <br>
&nbsp;&nbsp;&nbsp;爱好：
<input type="checkbox" name="hobby" checked value="yundong">运动
<input type="checkbox" name="hobby" checked value="chat">聊天
<input type="checkbox" name="hobby" value="playgame">玩游戏
<br>
出生日期：<input type="text">年
<select name="yue">
    <option value="wqwq" selected>选择月份</option>
    <option value="1yue">1</option>
    <option value="2yue">2</option>
    <option value="3yue">3</option>
    <option value="4yue">4</option>
    <option value="5yue">5</option>
    <option value="6yue">6</option>
    <option value="7yue">7</option>
    <option value="8yue">8</option>
    <option value="9yue">9</option>
    <option value="10yue">10</option>
    <option value="11ue">11</option>
    <option value="12yue">12</option>
</select>月
<input type="text">日 <br>
<input type="file">
<h2>阅读协议</h2> <br>
<textarea name="xieyi"  cols="60" rows="10">欢迎阅读服务条款协议</textarea>
<br>
同意以上协议 <input type="checkbox">
<br>
<input type="submit"> <input type="reset">
</body>
</html>

效果图

qq_42786725

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form表单小知识

&lt;form action="表单数据提交地址"method="数据提交方法"&gt;&lt;/form&gt;为了往服务端提交数据，提交的数据清洗移动方便处理：普通输入框需要添加name属性键值对完整。非输入框需要添加name value属性保证键值对完整 name 还有分组作用比如单选框，相同name是一组，单选框同一组选项有互斥效果复选框也需要name属性表明当前多项是一组...
复制链接

扫一扫