表单控件

Wed, 25 Sep 2024 00:00:00 +0800

01、`<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>`	表单分组，默认样式：一个框	便于表单样式管理的语义化元素
form	from的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="submit-登录">
 </fieldset>
</form>

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

表单控件 on Last Stand

表单控件

01、<form>表单

01、`<form>`表单