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类型属性] : 禁用输入框输入
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>