HTML基础标签——表单的运用和讲解

博客喵喵

已于 2025-04-05 16:36:57 修改

阅读量658

点赞数 21

文章标签： html web前端前端

于 2025-04-04 19:19:12 首次发布

本文链接：https://blog.youkuaiyun.com/Xuu_666/article/details/146611685

版权

#本文主要是对HTML基础标签表单的介绍和实例运用，详细介绍表单标签和表单元素。

一、表单

1、前言

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

2、表单标签

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

在一个HTML页面中允许有多个表单，表单的基本格式为：

<form name="" action="URL" method="get/post">
   ...
</form>

<from> 标签主要用于表单结果的处理和传送，常用的属性如下：

①name：表单的名字，在一个网页中用于唯一识别一个表单

②action：表单处理的方式，往往是E-mail地址或网址

③method：表单数据的传送方向，是获得（GET）表单还是送出（POST）表单

3、表单元素

表单可以存放各种表单元素，通常包含一个或多个表单元素，以下是一些常用的表单元素：

表单元素	功能
input	用来定义用户可输入数据的输入字段
keygen	用于表单的密钥对生成器字段
object	用来定义一个嵌入的对象
output	用来定义不同类型的输出，比如脚本的输出
select	用来定义下拉列表 / 菜单
textarea	用来定义一个多行的文本输入区域

（1） <input> 元素

<input> 元素根据不同的 type 属性来输入字段，<input> 元素的基本格式为：

<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y" />

<input> 元素常用的属性有14种，例如：

① type：指定要加入表单项目的类型（ text、password、checkbox、radio、button、hidden、email、date、pickers、number、range、image、file、submit 或 reset 等）

② name：表项的控制名，主要在处理表单时起作用

③ size：输入字段中的可见字符数

④ maxlength：允许输入的最大字符数目

（2）输入字段（三种基本方式）

①文字和密码的输入

type 属性值为 text，则输入的文本以标准字符显示
type 属性值为 password，则输入的每个字符显示为符号 “ * ”
在表项前应加入表项名称，如 “ 您的姓名 ” 等

文本框和密码框的格式为：

<input type="submit" name="文本框名">
<input type="password" name="密码框名">

②重置和提交

submit（提交按钮）将填写在文本域中的内容发送到服务器
reset（重置按钮）将表单输入框的内容恢复为初始值
button（普通按钮）制作一个用于触发事件的按钮
image（图片按钮）制作一个带有图片的美观按钮

四种按钮的格式为：

<input type="submit" value="按钮名">
<input type="reset" value="按钮名">
<input type="button" value="按钮名">
<input type="image" src="图片来源">

③复选框（checkbox）和单选钮（radio）

value属性可以设置该选择钮的控制初值，用以告诉表单设计者选择的结果
checked属性表示是否为默认选中项
name属性是控制名，同一组的选择钮的控制名是一样的

复选框和单选钮的格式为：

<input type="checkbox" name="复选框名" value="提交值" checked="checked">
<input type="radio" name="单选钮名" value="提交值" checked="checked">

二、例题演示

使用表格布局技术制作一个用户注册表单

示例代码如下：

<!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>
    <h2>用户注册</h2>
    <form action=""> <table border="ipx" bgcolor="pink" >
        <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="itme1" id="itme1"> 女 
                <input type="radio" name="itme2" id="itme2"> 男</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="itme1" id="itme1"> 中专 
                <input type="radio" name="itme2" id="itme2"> 大专
                <input type="radio" name="itme1" id="itme1"> 本科
                <input type="radio" name="itme2" id="itme2"> 研究生
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td><input type="checkbox" name="itme1" id="itme1"> 上网
                <input type="checkbox" name="itme2" id="itme2"> 篮球
                <input type="checkbox" name="itme3" id="itme3"> 听歌
                <input type="checkbox" name="itme4" id="itme3"> 下棋
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="提交">
                <input type="reset" value="重写"> </td>
            
        </tr>
</body>
</html>

运行结果如下：