form表单元素

1.form标签

• 表单的最外层包裹，内部书写表单元素
• form的属性：action属性，提交的服务器地址；method属性，表单的提交方式（GET和POST两种）
• 当form表单被提交的时会收集所有表单内容，并通过method属性提供的方式提交给action属性提供的地址

2.input元素

基本介绍

• input是一个表单元素
• input元素属性：type当前input的类型，text是单行文本输入框；value表单的内容；name表单的名称，提交表单时以name=value提交

<p>请输入名字：<input type="text" value="" name="username"></p>
<p>请输入密码：<input type="password" value="" name="password" ></p>

type类型汇总

• text：单行文本输入框
• password：密码输入框
• radio：单选框
• checkbox：复选框
• file：上传域
• hidden：隐藏域，用input提交，不需要用户操作，所以可以设置隐藏域不展示，但仍能提交
• button：按钮
• reset：重置当前表单
• submit：提交表单

<form action="###" method="get">
    <p>请输入名字：<input type="text" value="" name="username"></p>
    <p>请输入密码：<input type="password" value="" name="password" ></p>
    <p>
        性别：
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
    </p>
    <p>
        选择你喜欢的城市：
        <input type="checkbox" name="chengshi" value="北京">北京
        <input type="checkbox" name="chengshi" value="河南">河南
        <input type="checkbox" name="chengshi" value="上海">上海
        <input type="checkbox" name="chengshi" value="天津">天津
    </p>
    <p>
        上传照片：
        <input type="file" name="photo">
    </p>
    <P>
        <input type="hidden" name="id" value="2101">
    </P>

    <input type="button" value="点我">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

3.select&option元素

• 下拉列表
• select是下拉列表的最外层容器，有一个name属性，表示当前表单的键
• option是下拉列表的每一项，是双标签，内容是展示给用户的值；value属性是用来提交的值

<p>
    请选择你喜欢的颜色：
    <select name="color">
        <option value="红色">红色</option>
        <option value="绿色">绿色</option>
        <option value="黄色">黄色</option>
    </select>
</p>

4.textarea文本域

• 文本域，多行文本输入框
• 双标签，直接在内部书写内容
• cols横向字符数，一个汉字两个字符的大小；rows行数

<textarea name="doc" id="" cols="30" rows="10">留言</textarea>

5.button元素

• 按钮
• 可以添加type属性，有submit（提交），reset（重置），button（没功能）
• button是双标签，比input做按钮功能更丰富（如：内部可以嵌套图片作为按钮）

<button type="button">按钮</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
<button type="submit"><img src="./images/图片.jpg" alt="">提交</button>

6.label标签

• 为表单元素定义标注（点击标注信息可以让表单元素获取焦点）
• 使用方式1：

                   使用label标签添加标注；给label标签for属性和对应的表单元素的id值一致；当点                     击这个label的时候,就会让对应的表单元素获取焦点。

• 使用方式2：                                                                                                                                                 把标注信息和对应的表单一起放在label标签中；此时label标签不能书写for属性，                     input标签不需要书写id属性；此时点击label标签中任何内容,都可以触发表单获                         取焦点。

<!-- 使用方式1 -->
<p>
    <label for="username">请输入用户名：</label>
    <input type="text" name="username" id="username">
</p>

<!-- 使用方式2 -->
<p>
    <label>
        姓名：
        <input type="text" name="username">
    </label>
</p>