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中容易暴露安全性稍高，不过传输过程也是明文的，不会在浏览记录、日志中存储回退/刷新？无副作用（幂等），可重复访问有副作用，数据会被重新提交（不幂等），浏览器一般会提示用户数据会被重新提交使用场景获取数据提交数据：添加、修改、删除

因此：

数据有安全性要求的时候，建议用POST并且加密（HTTPS）。
获取数据（如查询）的的时候，一般用GET；提交数据（添加、修改、删除）时一般用POST 。

02、<input>表单元素表单元素<input>单标签、行内元素，主要用于输入各种类型数据。包含多个表单类型type：文本框、复选框、单选框、按钮等。
input.typeinput.type/属性描述备注text文本输入框（默认），单行文本，不支持换行<input type="text">password密码输入框radio单选框，相同name为一组互斥记得赋值valuecheckbox多选框，相同name为一组。如选中多个值会提交多个key-value记得赋值valuenumber数字输入，step设置步长hidden隐藏框/域，页面不可见，用于一些逻辑处理button普通按钮，按钮显示value值，结合JavaScript事件使用<input type="button" value="https://www.huyubaike.com/biancheng/提交" onclick="">建议用<button>元素代替submit表单提交按钮，在form中有效，直接提交表单数据同<button>元素的submit模式reset表单重置按钮，重置表单的数据，form中有效。image图片提交按钮，同submit，**src**设置图片，无图则显示altheight、width设置图片大小file文件选择框，如多值则value为第一个值，js获取files取多个值capture媒体拍摄方式-移动端?accept可接受文件类型，多个逗号隔开，