HTML学习笔记五：html-body-form表单
MDN元素查询地址
所有的html的元素我们都可以通过以下地址进行相关的查询和理解。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
表单元素
在网页中，如果需要向web服务器提交用户输入的信息时候，需要用到form表单进行提交。
表单元素的标签为form。
form表单的属性
- action:"http://search.jd.com/search"
提交的地址 - target:"_blank"
跳转属性，_blank: 新页签，_self: 当前页签 - method:"get",
提交的http方法，支持get，post，默认是get
form表单的行内元素
-
input 输入框
属性：- id=""
标签的id - type=""：input输入框的类型
- "text": 文本输入样式
- "radio": 单选框
- "checkbox": 复选框
- "hidden": 隐藏输入框，一般用于不用用户输入，提交时自动携带参数
- "submit": 默认提交按钮，名字为提交，此类型下只有value属性可配合使用，且value为按钮名称
- name="": 输入的值的名，提交数据后的key=value的key, 类型是单选框和复选框时候，name需要相同才能做关联的选择动作。
- value="": 输入框的默认值,radio和checkbox时候，此value是对于选择项的赋值
- maxlength="": 输入的最大长度
- checked[bool类型属性] : 单选框和多选框的默认选择项
- disabled[bool类型属性] : 禁用输入框输入
- id=""
-
button 按钮
属性：- id="" : 标签的id
- type=（不写默认是submit）
- submit : 默认属性，点击后提交表单
- reset : 重置，对输入框内容重置
- button : 普通按钮
- disabled[bool类型属性] : 禁用
-
textarea 文本编辑框(默认是可以在界面上进行边角拉动改变其宽高)
属性：- id="" : 标签的id
- name : 输入的值的名，提交数据后的key=value的key
- cols : 文本域的列数
- rows : 文本域的行数
- disabled[bool类型属性] : 禁用
-
select 下拉选择框
属性：- id="" : 标签的id
- name : 输入的值的名，提交数据后的key=value的key
- option : 下拉框选项
- value : 对应选项的填充值
- selected[bool类型属性] : 选中的值，可以做默认选中
- disabled[bool类型属性]: 禁用当前option选项
-
label 实现文字和输入控件焦点之间的关联
通过点击文字，实现输入焦点自动落入对应关联的输入框内。- 用法一:
lable标签的for属性，可以指向对应的input的id属性。
for="{id}": 通过for属性值找到对应的input的id进行关联
示例代码<label for="aqua">账户:</label> <input type="text" name="key" id="aqua" maxlength="16"> - 用法二：
将整个文字和需要关联焦点的输入框放在一起
即：input作为label的行内元素
<label>账户: <input type="text"></label>
- 用法一:
-
fieldset 输入框元素分组集合
属性：
legend: 分组的名字、标题
将需要分类的标签写在legend的同层级之下，将被以legend的文字命名的框起来
示例代码<fieldset> <legend> 主要信息</legend> <label for="aqua">账户:</label> <input type="text" name="key" id="aqua" maxlength="16"> <br> <label> 密码: <input type="password" name="pwd" value="" maxlength="16"> </label> <br> 性别: <input type="radio" name="xb" value="nan" id="nan"><label for="nan"> 男</label> <label> <input type="radio" name="xb" value="nv" checked>女 </label> </fieldset>
表单所有元素标签使用的示例代码：
<form action="http://www.baidu.com/s" target="_blank" method="">
<input type="text" name="wd" id="name">
<button>百度搜索</button>
</form>
<hr>
<form action="http://search.jd.com/search" target="_self" method="get">
<input type="text" name="keyword" id="name">
<button>京东搜索</button>
</form>
<hr>
<form action="http://search.jd.com/search" target="_blank">
<fieldset>
<legend> 主要信息</legend>
<label for="aqua">账户:</label>
<input type="text" name="key" id="aqua" maxlength="16">
<br>
<label>
密码: <input type="password" name="pwd" value="" maxlength="16">
</label>
<br>
性别:
<input type="radio" name="xb" value="nan" id="nan"><label for="nan">男</label>
<label >
<input type="radio" name="xb" value="nv" checked>女
</label>
</fieldset>
<fieldset>
<legend>附加信息</legend>
<br>
爱好: <input type="checkbox" name="aihao" value="chouyan">抽烟
<input type="checkbox" name="aihao" value="hejiu" checked>喝酒
<input disabled type="checkbox" name="aihao" value="tangtou">烫头
<br>
其他:
<textarea name="ta" id="112" cols="20" rows="5"></textarea>
<br>
地区:
<select name="sele" id="se123">
<option value="上海1">上海</option>
<option value="hz" selected>杭州</option>
<option value="北京2">北京</option>
<option value="广州3">广州</option>
<option value="深圳4">深圳</option>
</select>
</fieldset>
<br>
<hr>
<input type="hidden" name="abc" value="123">
<input type="submit" value="确定">
<button type="reset">重置</button>
<br>
<hr>
<button type="button">这只是一个按钮</button>
</form>