HTML表单

作者: 爪爪123 | 来源:发表于2020-07-06 16:54 被阅读0次

HTML表单的简单用法
简单介绍 HTML 表单的用法
HTML表单的用法
HTML学习笔记（四）
HTML 表单的用法
08-表单
Django学习-第十三讲（下）：表单（一）forms.form
HTML4.01+CSS2.0教程（七）
HTML表单介绍
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表单的简单用法
HTML表单的简单用法：HTML表单用于搜集不同类型的用户输入。元素定义HTML表单。HTML表单包含表单元素。...
简单介绍 HTML 表单的用法
HTML 表单用于收集用户输入，元素定义 HTML 表单。HTML 表单包含表单元素，表单元素指的是不同类型的...
HTML表单的用法
html表单用于搜集不同类型的用户输入。
元素 form元素定义html表单 HTML 表单包含表单元...
HTML学习笔记（四）
一：HTML 表单 HTML 表单用于搜集不同类型的用户输入。元素 HTML 表单用于收集用户输入。 HTML ...
HTML 表单的用法
HTML 表单用于搜集不同类型的用户输入元素定义 HTML 表单：所有属性如下 HTML 表单包含表单元素表...
08-表单
本节案例表单的作用 HTML 表单用于收集用户输入。表单form 元素定义 HTML 表单，里面需要有各种表单...
Django学习-第十三讲（下）：表单（一）forms.form
1. html表单和django中的表单的区别 HTML中的表单：单纯从前端的html来说，表单是用来提交数据给...
HTML4.01+CSS2.0教程（七）
3/6/2017 12:33:03 PM html表单 html表单用于收集用户输入，而元素用于定义html表单...
HTML表单介绍
HTML 表单用于搜集不同类型的用户输入，元素定义 HTML 表单；HTML 表单包含不同类型的 input ...
HTML表单用法
HTML form表单用于为用户输入创建 HTML 表单。收集用户不同类型的数据。 HTML Form 語法表单...