表单标签: | 易学教程

表单标签: <form>

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

<input>系列标签

'''
<1> 表单类型

type:        text 文本输入框

             password 密码输入框

             radio 单选框

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别？

             file 提交文件：form表单需要加上属性enctype="multipart/form-data" 
            
            上传文件注意两点：

                     1 请求方式必须是post
                     2 enctype="multipart/form-data"

 <2> 表单属性

 name:    表单提交项的键.

           注意和id属性的区别：name属性是和服务器通信时使用的名称；
           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

                type="button", "reset", "submit" - 定义按钮上的显示的文本
                 
                type="text", "password", "hidden" - 定义输入字段的初始值
                 
                type="checkbox", "radio", "image" - 定义与输入相关联的值


checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

'''

姓名密码

<p>
        <label for="c1">姓名：</label>
        <input type="text" name="username"  placeholder="username" id="c1">
    </p>

    <p>密码：<input type="password" name="pwd"></p>

效果如下：

密码是密文显示

姓名：

密码：

性别爱好

<p>性别: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</p>

    <p>爱好：<input type="checkbox" name="hobby" value="football" checked>足球 <input type="checkbox" name="hobby" value="basktball">篮球<input type="checkbox" name="hobby" value="double2">双色球</p>

默认选择足球

性别: 男女

爱好：足球篮球双色球

其余的

  <p>头像：<input type="file"></p>

    <p><input type="reset" value="reset"></p>

    <p><input type="button" value="按钮" onclick="alert(1234)"></p>

    <p><input type="hidden" name="key" value="v1"></p>

头像：

select标签

<p>
        省份：
        <select name="province" size="3" multiple="multiple">
            <option value="1">河北省</option>
            <option value="2" selected>河南省</option>
            <option value="3">湖北省</option>
            <option value="4">日本省</option>
        </select>

    </p>

效果如下：

multiple设置可以多选，size设置默认显示3个

省份：

文本框

 <p>
        <textarea name="gerenjianjie" id="" cols="20" rows="10" placeholder="个人简介"></textarea>
    </p>

提交submit

<p><input type="submit" value="submit"></p>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<form action="" method="get" enctype="multipart/form-data">
    <p>
        <label for="">姓名：</label>
        <input type="text" name="username" placeholder="username" id="c1" >
    </p>
    <p>
        <label for="">密码：</label>
        <input type="text" name="pwd" placeholder="passwd">
    </p>
    <p>
        性别：<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="0">女
    </p>
    <p>
        爱好： <input type="checkbox" name="hobby" value="football" checked>足球
        <input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="JAPAN TV">日本电影
        <input type="checkbox" name="hobby" value="pingpang">乒乓球
    </p>
    <p>
        头像： <input type="file">
    </p>
    <p>
        <input type="reset" name="reset" value="重置按钮">
    </p>
    <p>
        <input type="button" name="button" value="button按钮" onclick="alert(1234)">
    </p>
    <p>
        <input type="hidden" name="key" value="v1">
    </p>
    <p>
        <select name="省份" id="province" size="2" multiple="multiple">
            <option value="1">河北省</option>
            <option value="2">河南省</option>
            <option value="3">山东省</option>
            <option value="4">日本省</option>
        </select>
    </p>
    <p>
        <textarea name="gerenjianjie" id="g1" rows="30" cols="50" placeholder="个人简介"></textarea>
    </p>
    <p>
        <input type="submit" value="submit">
    </p>
</form>
</body>
</html>

来源：https://www.cnblogs.com/litzhiai/p/8275049.html

标签

form表单提交