HTML—表单设计

原创已于 2025-03-30 18:04:49 修改 · 504 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #服务器 #前端

于 2025-03-30 18:01:07 首次发布

介绍

表单是网页中最常用的元素,是网站服务器端与客户端之间沟通的桥梁，表单在网上随处可见,可用于登录页面输人账号、客户留言、搜索产品等

一表单的基本概念：

表单被广泛应用于各种信息的搜集与反馈中，一个完整的交互表单由两部分组成:一是客户端包含的表单页面,用于填写访问者进行交互的信息; 另一个是服务端的应用程序、用于处理访问者提交的信息。当访问者在Web浏览器中显示的表单中输人信息后，单击“提交"按钮,这些信息将被发送给服务器，服务器端应用程序对这些信息进行处理,并将结果发送给访问者。

二表单标签：

网页上由具有可输入表项及项目选择等控件所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单,<form >标签是成对出现的,在开始标签<form>和标签</lorm >之间的部分就是一个表单的内容。

代码展示与讲解

目标效果：

一建立表格：

首先建立一个10行两列的表格： “CENTER” = 居中

<CENter>
        <table height="200rpx" width="400rpx" border="2" bgcolor="khaki">
            <tr>用户注册
                <td>用户名</td>
                <td></td>
            </tr>
            <tr>
                <td>密码</td>
                <td></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td></td>
            </tr>
            <tr>
                <td>性别</td>
                <td></td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td></td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td></td>
            </tr>
            <tr>
                <td>电子邮件</td>
                <td></td>
            </tr>
            <tr>
                <td>最高学历</td>
                <td></td>
            </tr>
            <tr>
                <td>爱好</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </CENter>

二使用<input type=" ">建立可选格：

" text " = 普通选框------------(列如用户名，联系电话等)

<input type="text">

" radio " = 单选框----------------------(列如男女,学历选框等)

<input   type = "radio" name="a1" id="a1”>男 “   

<input   type = "radio" name="a1" id="a2“>女 “    #  name一样，  id不一样

" checkbox " = 多选框----------------------------------------(列如爱好)

<input   type = "radio" name="a1" id="a1”>玩游戏 

<input   type = "radio" name="a2" id="a2“>画画          #  name，id都一样

" password " = 隐藏输入内容框----------------------------(列如密码)

<input type="password">

" submit " = 提交---------------------------(将数据提交到服务器)

<input type="submit" value="提交">

“ reset ” = 重置------------------------(将数据恢复到初始状态)

<input type="reset"value="重写">

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>
<body>
    <CENter>
        <table height="200rpx" width="400rpx" border="2" bgcolor="khaki">
            <tr>用户注册
                <td>用户名</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td>密码</td>
                <td><input type="password">*</td>
            </tr>

            <tr>
                <td>确认密码</td>
                <td><input type="password">*</td>
            </tr>

            <tr>
                <td>性别</td>
                <td><input type="radio" name="a1" id="a1">男
                    <input type="radio" name="a1" id="a2">女</td>
            </tr>

            <tr>
                <td>出生日期</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td>联系电话</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td>电子邮件</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td>最高学历</td>
                <td><input type="radio" name="a2" id="a1">中专
                    <input type="radio" name="a2" id="a2">大专
                    <input type="radio" name="a2" id="a3">本科
                    <input type="radio" name="a2" id="a4">研究生</td>
            </tr>

            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="a1" id="a1">玩铲
                    <input type="checkbox" name="a2" id="a2">运动
                    <input type="checkbox" name="a3" id="a3">学习 </td>
            </tr>

            <tr>
                <td>
                    <input type="submit" value="提交">
                    <input type="reset"value="重写"></td>
            </tr>
        </table>
    </CENter>
</body>
</html>