HTML基础之表单制作

一、知识点1、表单的作用：信息的收集数据的验证在线考试调查问卷2、表单的构成提示性文字：提示用户如何操作（一般由placeholder属性完成）表单域：相当于一个容器，包含若干表单控件表单控件：具体的功能项（按钮，下拉列表，输入框等）3、表单域<form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名">表单内容</form

别Null.了

25739人浏览 · 2021-05-14 17:59:53

别Null.了 · 2021-05-14 17:59:53 发布

一、知识点

1、表单的作用：

信息的收集
数据的验证
在线考试
调查问卷

2、表单的构成

提示性文字：提示用户如何操作（一般由placeholder属性完成）
表单域：相当于一个容器，包含若干表单控件
表单控件：具体的功能项（按钮，下拉列表，输入框等）

3、表单域

表单内容

</form>

4、表单控件

（1）input：输入框。都有value属性，通过用户输入信息将value属性的值提交给远程服务器并保存。

单行文本框：<input type="text" id=" " value=" " placeholder="提示信息" >
密码框：<input type="password" placeholder="提示信息">
数字输入框：<input type="number> （input后面的属性如上）
日期输入框：<input type="date">
颜色输入框：<input type="color">
文件选择框（通常用于上传文件）：<input type="file" >
单选按钮：<input type="radio" name="按钮名称" checked> 文本（check是让表单进入后先默认选择此选项 name值相同则是让此文本选项为单选，不可同时选择相同name值的选项）
复选按钮：<input type="checkbox" value="按钮显示出来的内容" id=" "> （此处的value表示的事按钮显示出来的文本内容）
提交按钮：<input type="submit" value="按钮上显示出来的内容"> （必须放在<form></form>中有效）
重置按钮：<input type="reset" value="按钮上显示出来的内容"> （必须放在<form></form>中有效）
普通按钮：<input type="button" value="按钮上显示出来的内容">

（2）select：下拉列表

</select>

（3）textarea：文本框（多行文本输入框，用户可以调节放大缩小）

二、表单制作

代码：

<body>
    <font color="red" face="" size="5">
        <p style="text-align: center;">用户注册表单</p>     /*标题*/
    </font>
    <hr color="black" width="1000" size="2">       /*水平分割线*/
    <form action="#" method="GET">                 /*后端服务器*/
    <table style="text-align: center;">            /*创建一个表格,将内容设置为居中*/
        <tr>
            <td>
                <label>用户名：</label>
            </td>
            <td style="text-align: left;" width="500">
                <input type="text" placeholder="请输入用户名">
            </td>
            <td>
                <font color="red" size="1">用户名长度为4-16个字符</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>密&nbsp;&nbsp;&nbsp;码：</label>
            </td>
            <td style="text-align: left;">
                <input type="password" placeholder="请输入密码">
            </td>
            <td>
                <font color="red" size="1">密码长度为6个字符</font>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;" width="400">
                <label>确认密码：</label>
            </td>
            <td style="text-align: left;">
                <input type="password" placeholder="请确认密码">
            </td>
            <td>
                <font color="red" size="1">重复密码</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>性别：</label>
            </td>
            <td style="text-align: left;">
                <input type="radio" name="sex" id="r1" value="1" checked>  /*单选按钮*/
                <label for="r1">男</label>
                <input type="radio" name="sex" id="r2" value="0">
                <label for="r2">女</label>
            </td>
        </tr>
        <tr>
            <td>
                <label> 出生日期：</label>
            </td>
            <td style="text-align: left;">
                <input type="date">
            </td>
        </tr>
        <tr>
            <td>
                <label>爱好：</label>
            </td>
            <td style="text-align: left;">
                <input type="checkbox" value="体育" id="ch1">    /*复选按钮*/
                <label for="ch1">游泳</label>
                <input type="checkbox" value="旅游" id="ch2">
                <label for="ch2">旅游</label>
                <input type="checkbox" value="音乐" id="ch3">
                <label for="ch3">音乐</label>
                <br><br>
                <input type="checkbox" value="影视" id="ch4">
                <label for="ch4">影视</label>
                <input type="checkbox" value="追星" id="ch5">
                <label for="ch5">追星</label>
                <input type="checkbox" value="写作" id="ch6">
                <label for="ch6">写作</label>
            </td>
            <td>
                <font color="red" size="1">至少选择三项</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>个人介绍：</label>
            </td>
            <td style="text-align: left;">
                <textarea cols="20" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <label>验证码：</label>
            </td>
            <td style="text-align: left;">
                <input type="number" placeholder="请输入验证码">
                <label>791216</label>
            </td>
            <td>
                <font color="red" size="1">请输入验证码</font>
            </td>
        </tr>
        <tr rowspan="3" style="text-align: right;">
            <td >
                <input type="file">
            </td>
        </tr>
    </table>
    <hr color="black" width="1000" size="2">
    <table>
        <tr rowspan="3" style="text-align: right;">  /*此处rowspan是使单元格跨行*/
            <td width="1100">
            <input type="submit" value="确认">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
            </td>
        </tr>
    </table>
    </form>
</body>