HTML中几种常见的表单类型举例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51735681/article/details/116276588

本文介绍了HTML中三种常见的表单类型：带边框的表单、带有输入框和确认按钮的表单以及可发送电子邮件的表单。通过示例代码展示了如何创建这些表单，包括使用`<form>`、`<fieldset>`、`<legend>`、`<input>`等标签，以及`<button type="submit">`和`<button type="reset">`的区别。在邮件表单中，重点解释了`<input type="email">`的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML中几种常见的表单类型举例：
带边框的表单
在数据周围绘制一个带标题的框，主要用到<fieldset> </fieldset>标签和<legend> </legend>标签。其中<fieldset> </fieldset>标签是用来形成表格，<legend> </legend>标签是用来定义边框的标题。
举例代码如下：

<!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>Document</title>
</head>

<body>

    <form action="">
        <fieldset>
            <legend>Personal information:</legend>
            Name:<input type="text" size="30"><br> 
            E-mail: <input type="text" size="30"><br> 
            Date of birth: <input type="text" size="22">
        </fieldset>
    </form>
</body>

</html>

以上代码运行结果如所示：
在这里插入图片描述
(----------------------------------------分割线--------------------------------------)

带有输入框和确认按钮的表单
输入框在之前的文章中讲解过，这里我们重点讲解一下“确认按钮”的定义方法。
<input type="submit" value="提交"> 定义了提交按钮，其中value="提交"是用来确认提交按钮里面显示的内容。
举例代码如下;

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>带有输入框和确认按钮的表单</title> 
</head>
<body>

<form action="demo-form.php">
	First name: <input type="text" name="FirstName" value="Mickey"><br>
	Last name: <input type="text" name="LastName" value="Mouse"><br>
		<input type="submit" value="提交">
</form>

	<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

以上代码运行结果如图所示：
在这里插入图片描述
(----------------------------------------分割线--------------------------------------)

可发送电子邮件的表单
带邮件的表单，其核心标签是

E-mail:<br>
<input type="text" name="mail" value="your email"><br>

就是在<input>标签中加入mail的元素。
举例代码如下：

<!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>Document</title>
</head>

<body>
    <h3>发送邮件到123456@163.com邮箱：</h3>

    <form action="MAILTO:1234465@163.com" method="POST" enctype="text/plain">
        Name :<br>
        <input type="text" name="name" value="your name"><br> E-mail: <br>
        <input type="text" name="mail" value="your mail"><br> Comment: <br>
        <input type="text" name="comment" value="your comment" size="50"><br>
        <input type="submit" value="发送">
        <input type="reset" value="重置">
    </form>
</body>

</html>

以上代码运行结果如下：
在这里插入图片描述
当用户名、邮箱地址、评论备注输入完毕之后，点击”发送“，即可将相应的数据和指令发送出去。在此过程中，点击重置，即清空所有已经填入的数据，重新输入。

备注：在以上<input>标签中，出现了一个type=“text” ，这个表示在此输入框中只能输入数字。
<input type="reset">定义重置按钮

<input type="reset" name="button" id="button" value="重置">

点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。