HTML的基本知识（七）——表单的基本知识及案例-CFANZ编程社区

HTML的基本知识（七）——表单的基本知识及案例

我为什么要努力？我喜欢的东西都很贵，我想去的地方都很远，我爱的人超级完美，这就是我努力的理由。

HTML的基本知识（七）——表单的基本知识及案例_html5
一、认识表单
1、表单在WEB网页中用来给访问者填写信息，从而采集客户端信息，使得网页居右交互功能，一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交操作，于是表单的内容就从客户端的浏览器传送到服务器上，这样网页就具有了交互性。
2、表单的作用：提交数据到服务器，使得页面具有交互性
3、标签：

<form action="提交的地址" name="表单的名称" method="提交的方式"></form>
注意：form之间不能相互嵌套，一个页面可以有多个form表单
提交的方式有两种： get（默认值）和post的区别：
 （1）get提交的数据不安全，会在地址栏中显示，post安全 
 （2）get提交的数据的大小有限制（不能超过2KB），post理论上没有限制

二、表单元素

普通的单行文本框：<input type="text" />
    密码：<input type="password" />
    单选按钮：  <input type="radio"/>
    多选按钮：<input type="checkbox"/> 
    提交按钮： <input type="submit"/> 
    重置按钮：<input type="reset"/> 
    没有功能的按钮： <input type="button"/> 
    提交按钮： <button>提交</button> 
    默认重置按钮： <button type="reset"/></button> 
    没有功能的按钮<button type="button"/></button>
    文件域：<input type="file">注意把form的编码格式改为二进制，enctype="application/x-www-form-urlencoded" 
    隐藏域：<input type="hidden"> 隐藏后在页面不显示，但是携带的信息可以正常提交
    下拉列表：
      <select name="" id="">
    <option value="">...</option>
    <option value="">...</option>
    <option value="">...</option>
    <option value="">...</option>
    </select>
      <select name="" id="">
    <optgroup label="组名">
        <option value="">...</option>
        <option value="">...</option>
        <option value="">...</option>
        <option value="">...</option>
    </optgroup>
</select>
多行文本框：<textarea >...</textarea>
提升用户体验，配合单选按钮和多选按钮使用:<label for=""></label> lable 标签的for属性和input的id属性一致

三、表单元素的基本属性

type 表单元素的类型 
name 表单元素的名称 
value 当前值
checked 默认被选中，配合单选按钮和多选按钮使用 
selected  默认显示，配合option使用
disabled 禁用
readonly 只读

四、练习题
HTML的基本知识（七）——表单的基本知识及案例_html_02

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习题</title>
</head>
<body>
    <form action="form1">
        <table border="3" bordercolor="black" width="600" height="400" cellspacing="0" align="center">
            <tr>
                <td align="right">
                    用户名：
                </td>
                <td>
                    <input type="text" placeholder="请输入用户名">
                </td>
            </tr>
            <tr>
                <td align="right">
                    密码：
                </td>
                <td>
                    <input type="password" placeholder="请输入密码">
                </td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td>
                    <input type="password" placeholder="请再次输入密码">
                </td>
            </tr>
            <tr>
                <td align="right">
                    验证码：
                </td>
                <td>
                    <input type="text" placeholder="请输入验证码">
                </td>
            </tr>
            <tr>
                <td align="right">
                    性别：
                </td>
                <td>
                    <input type="radio" name="sex" id="man"><label for="man" checked>男</label>
                    <input type="radio" name="sex" id="woman"><label for="woman">女</label>

                </td>
            </tr>
            <tr>
                <td align="right">年龄：</td>
                <td>
                    <input type="text" placeholder="请输入年龄">
                </td>
            </tr>
            <tr>
                <td align="right">
                    爱好：
                </td>
                <td>
                    <select name="shopping" id="shopping">
                        <option value="0">购物</option>
                        <option value="0">购物</option>
                        <option value="0">购物</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">
                    你喜欢的游戏：
                </td>
                <td>
                    <input type="checkbox" name="game" id="games"><label for="games">穿越火线</label>
                    <input type="checkbox" name="game" id="hero"><label for="hero">英雄联盟</label>
                    <input type="checkbox" name="game" id="honor"><label for="honor">王者荣耀</label>
                    <input type="checkbox" name="game" id="happy"><label for="happy">开心消消乐</label>

                </td>
            </tr>
            <tr>
                <td align="right">
                    邮箱：
                </td>
                <td>
                    <input type="email" placeholder="请输入邮箱">
                </td>
            </tr>
            <tr>
                <td align="right">
                    邮箱密码：
                </td>
                <td>
                    <input type="password" placeholder="请输入邮箱密码">
                </td>
            </tr>
            <tr>
                <td align="right">
                    <input type="submit">
                </td>
                <td>
                    <input type="reset">

                </td>
            </tr>
        </table>
    </form>

</body>

</html>

本期结束，我们下期再见！