2 HTML元素大全-表单 _生活百科

文章插图
01、<form>表单<form> 表单是比较重要的HTML元素，块元素，主要作用是向服务端提交数据。结合表单元素input使用，通过内部的button按钮提交（type="submit"）表单数据。
元素/属性描述值/备注<form>表单元素?action提交表单的目标（服务端）地址url?method提交数据的方式，就是数据传输的方式 get：通过URL提交数据[url]?uname=1&age=2 ， post ，通过HTTP表单数据提交，键值格式。?target提交数据时打开action url的方式_self：当前窗口（默认值）；_blank：新窗口?enctype编码类型（encode type），规定了form表单在发送到服务器时候编码方式，不常用。 application/x-www-form-urlencoded：编码所有字符（默认） multipart/form-data ：混合类型，表单中有文件上传时使用 text/plain：纯文体，空格转换为 “+” 加号，不对特殊字符编码?submit()提交表单数据，通过js代码调用<fieldset>表单分组，默认样式：一个框便于表单样式管理的语义化元素?formfrom的id ，当<fieldset>不在form中时?disabled整个分组都不可用?<legend>作为<fieldset>的标题，显示在框上（legend /?led??nd/ 铭文、图例）

<style>#form fieldset {border: 1px solid skyblue;padding: 20px 10px;border-radius: 5px;text-align: center;margin: 10px 0px;}#form fieldset legend {font-size: 1em;border: 1px solid rgb(236, 175, 43);border-radius: 1em;padding: 3px 15px;}</style><form id="form" action="#" target="_self" method="post"><fieldset><legend>登录</legend><input type="text" name="uname" placeholder="请输入用户名" required maxlength="36"><input type="password" name="upwd" required maxlength="12" placeholder="输入密码"><input type="submit" value="https://www.huyubaike.com/biancheng/submit-登录"></fieldset></form>

文章插图

注意：<form>提交数据时参数名为表单元素的name ，因此表单控件须设置name属性。

get、post区别：GETPOST提交方式数据在url的问号?后：url?key=value&key=...数据在请求体中编码enctype只有appliacation-x-www-form-urlencoded支持多种书签/历史可以加入收藏，历史记录、日志会保留数据不可收藏、不会保留数据缓存/效率可以被浏览器缓存，效率（速度）更高不可缓存数据类型/长度只允许 ASCII 字符， URL长度有限制（2048），不同浏览器不同。类型没有限制，支持二进制数据。长度（几乎）无限制安全性安全性更低，数据在URL中容易暴露安全性稍高，不过传输过程也是明文的，不会在浏览记录、日志中存储回退/刷新？无副作用（幂等），可重复访问有副作用，数据会被重新提交（不幂等），浏览器一般会提示用户数据会被重新提交使用场景获取数据提交数据：添加、修改、删除