HTML表单

表单基础结构

表单语法

截屏2020-07-06下午4.14.19.png
截屏2020-07-06下午4.14.48.png

<input>标签

截屏2020-07-06下午4.16.07.png
截屏2020-07-06下午4.16.48.png

<form>
        姓名：<input type="text" name="username"/>
        密码：<input type="password" name="paw"/>
        <input type="Submit" />

    </form>

截屏2020-07-06下午4.21.26.png

单行文本域

截屏2020-07-06下午4.43.20.png
截屏2020-07-06下午4.48.32.png

按钮

截屏2020-07-07上午9.43.47.png

图像域和隐藏域

图像域（图像提交按钮）

截屏2020-07-07上午9.50.44.png

隐藏域

截屏2020-07-07上午10.05.10.png

隐藏域的内容用户看不到，按提交按钮后该内容提交到服务器

<form>
<table bgcolor="#f2f2f2" align="center" width="60%" height = "480px">
    
    <tr>
        <td align="right" width = "35%" >姓名：</td>
        <td>
            <input type="text" name="username" placeholder="请输入姓名" maxlength="6">
        </td>
    </tr>

    <tr>
        <td align="right" width = "35%">邮箱：</td>
        <td> <input type="text" name="mail" placeholder="" value="@163.com"> </td>
    </tr>

    <tr>
        <td align="right" width = "35%">密码：</td>
        <td> <input type="password" name="psw" placeholder="请输入密码"> </td>
    </tr>

    <tr>
        <td align="right" width = "35%">确认密码：</td>
        <td> <input type="password" name="psw" placeholder="请再次输入密码"></td>
    </tr>

    <tr>
        <td align="right" width = "35%">上传照片：</td>
        <td> <input type="file" name="file" > </td>
    </tr>

    <tr>
        <td align="right" width = "35%">性别：</td>
        <!-- checked 表示默认选中 -->
        <td> <input type="radio" name="sex" value="men">男 <input type="radio" name="sex" value="women">女<input type="radio" name="sex" value="bm" checked>保密</td>
    </tr>

    <tr>
        <td align="right" width = "35%">爱好：</td>
        <td> <input type="checkbox" name="">游泳<input type="checkbox" name="">跑步<input type="checkbox" name="">跳舞</td>
    </tr>

    <tr>
        <td align="right">城市：</td>
        <td>
            <!-- multiplen 多项选择  selected默认选中-->
            <select name="city" >
                <option value="">--请选择--</option>
                <optgroup label="1组">
                <option value="bj" selected>北京</option>
                <option value="tj">天津</option>
                <option value="fj">福建</option>
                <option value="xm">厦门</option>
                </optgroup>

                <optgroup label="2组">
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="zz">郑州</option>
                <option value="jx">嘉兴</option>
                </optgroup>
            </select>


            <select name="city" size="6" multiple>
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="fj">福建</option>
                <option value="xm">厦门</option>
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="zz">郑州</option>
                <option value="jx">嘉兴</option>
            </select>

        </td>


    </tr>
    <tr>
        <td align="right" width = "35%"></td>
        <td> <input type="button" name="button" value="来点我"><input type="submit" name="submit"> <input type="Reset" name="reset">
            <!-- <input type="image" name="image_button" src="btn_pic.png"/> -->
            <input type="hidden" name="hidden" value="这是一个用户注册信息" />
        </td>
    </tr>
</table>
</form>

下拉菜单和列表标签

截屏2020-07-07上午10.13.40.png

下拉菜单和列表标签

截屏2020-07-07上午10.14.44.png

<option>标签属性

截屏2020-07-07上午10.23.48.png

下拉菜单分组

截屏2020-07-07上午10.30.35.png

<!-- multiplen 多项选择  selected默认选中-->
            <select name="city" >
                <option value="">--请选择--</option>
                <optgroup label="1组">
                <option value="bj" selected>北京</option>
                <option value="tj">天津</option>
                <option value="fj">福建</option>
                <option value="xm">厦门</option>
                </optgroup>

                <optgroup label="2组">
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="zz">郑州</option>
                <option value="jx">嘉兴</option>
                </optgroup>
            </select>


            <select name="city" size="6" multiple>
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="fj">福建</option>
                <option value="xm">厦门</option>
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="zz">郑州</option>
                <option value="jx">嘉兴</option>
            </select>

文字域标签

单行文本域<input>

截屏2020-07-07上午10.36.10.png

多行文本域<textarea>

截屏2020-07-07上午10.37.13.png
<textarea>标签属性
截屏2020-07-07上午10.39.31.png

    <!-- 多行文本域  rows文本域的可见行数为6，cols文本域的可见宽度为50-->
            <textarea rows="6" cols="50" placeholder="请输入个人信息"></textarea>

表单属性<form>

截屏2020-07-07上午10.48.46.png
截屏2020-07-07上午10.49.19.png

在 form标记符中使用 action 属性指定表单处理程序的位置。

POST 与 GET的区别

截屏2020-07-07上午11.00.59.png

<!DOCTYPE html>
<html>
<head>
    <title>注册信息</title>
    <meta charset="utf-8">
</head>
<body>

<h1 align="center">注册信息</h1>
<hr color="#336699">

<!-- action 用来提交表单 -->
<form action="action.php" method="post" target="_blank">
<table bgcolor="#f2f2f2" align="center" width="60%" height = "480px" >
    
    <tr>
        <td align="right" width = "35%" >姓名：</td>
        <td>
            <input type="text" name="username" placeholder="请输入姓名" maxlength="6">
        </td>
    </tr>

    <tr>
        <td align="right" width = "35%">邮箱：</td>
        <td> <input type="text" name="mail" placeholder="" value="@163.com"> </td>
    </tr>

    <tr>
        <td align="right" width = "35%">密码：</td>
        <td> <input type="password" name="psw" placeholder="请输入密码"> </td>
    </tr>

    <tr>
        <td align="right" width = "35%">确认密码：</td>
        <td> <input type="password" name="psw" placeholder="请再次输入密码"></td>
    </tr>

    <tr>
        <td align="right" width = "35%">上传照片：</td>
        <td> <input type="file" name="file" > </td>
    </tr>

    <tr>
        <td align="right" width = "35%">性别：</td>
        <!-- checked 表示默认选中 -->
        <td> <input type="radio" name="sex" value="men">男 <input type="radio" name="sex" value="women">女<input type="radio" name="sex" value="bm" checked>保密</td>
    </tr>

    <tr>
        <td align="right" width = "35%">爱好：</td>
        <td> <input type="checkbox" name="">游泳<input type="checkbox" name="">跑步<input type="checkbox" name="">跳舞</td>
    </tr>

    <tr>
        <td align="right">城市：</td>
        <td>
            <!-- multiplen 多项选择  selected默认选中-->
            <select name="city" >
                <option value="">--请选择--</option>
                <optgroup label="1组">
                <option value="bj" selected>北京</option>
                <option value="tj">天津</option>
                <option value="fj">福建</option>
                <option value="xm">厦门</option>
                </optgroup>

                <optgroup label="2组">
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="zz">郑州</option>
                <option value="jx">嘉兴</option>
                </optgroup>
            </select>


            <select name="city" size="6" multiple>
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="fj">福建</option>
                <option value="xm">厦门</option>
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="zz">郑州</option>
                <option value="jx">嘉兴</option>
            </select>

        </td>


    </tr>
    <tr>
        <td align="right">简介：</td>
        <td>
            <!-- 多行文本域  rows文本域的可见行数为6，cols文本域的可见宽度为50-->
            <textarea rows="6" cols="50" placeholder="请输入个人信息"></textarea>
        </td>
    </tr>
    <tr>
        <td align="right" width = "35%"></td>
        <td> <input type="button" name="button" value="来点我"><input type="submit" name="submit"> <input type="Reset" name="reset">
            <!-- <input type="image" name="image_button" src="btn_pic.png"/> -->
            <input type="hidden" name="hidden" value="这是一个用户注册信息" />
        </td>
    </tr>
</table>
</form>
</body>
</html>

截屏2020-07-07上午11.05.03.png