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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • html表单
    1.语法: 表单元素 表单本身不可见 表单元素有文本域，单选框，复选框，按钮，列表等 f...
    9372da03c5ef阅读 1,709评论 0赞 1
  • HTML表单和表单控件
    表单标签（掌握）表单目的是为了收集用户信息。在网页中，我们也需要跟用户进行交互，收集用户资料，这时就需要表单。在H...
    你大爷葛二蛋阅读 8,745评论 0赞 0
  • HTML表单、HTML表格（第14周）
    本周学习内容：HTML表格第一章至第四章 HTML表单第一章至第四章 注：1.在搭建谷歌...
    Persistence敏捷阅读 3,738评论 0赞 1
  • HTML表单的用法
    一、HTML表单 表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea...
    饥人谷_李维超阅读 2,773评论 0赞 0
  • HTML表单的用法
    HTML表单的用法 表单表单作用：HTML表单用于搜集不同类型的用户输入。表单的工作机制访问一个含有表单的页面输入...
    饥人谷_罗丹阅读 1,950评论 0赞 0