html(10)-初识表单

最新推荐文章于 2024-10-21 19:30:32 发布

enjoy_code_

最新推荐文章于 2024-10-21 19:30:32 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/enjoy_code_/article/details/112726801

html 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了HTML中的表单基础知识，包括单选按钮、复选框、提交按钮和简单下拉框的使用。通过示例解释了form标签的action和method属性，以及input标签的type、name、value和id属性的重要性。并提到了单选按钮和复选框的name属性对于组选择逻辑的影响。

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

在html中，表单一直是很重要的结构。

来自狂神说
下面提供一个自定义的表单例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="first.html" method="post">
    <p>账号：<input type="text" name="username"/></p>
    <p>密码：<input type="password" name="password"/></p>p
    <p>
        <input type="submit" name="submit" id="submit" value="登录"/>
        <input type="reset" name="reset" id="reset"/>
    </p>
</form>
</body>
</html>

下面解释例子的内容：

首先,<form>标签约定了这是一个表单，
action是必填属性，约定了处理表单数据的页面或网站；
method可以选填post和get；

然后使用段落标签<p>进行分段，这样比较美观。

<input>标签有极其丰富的类型type，基本上满足表单的大多数需求。上面用到了text,password,submit,reset,另外还有date，file，email等类型。
推荐每一个input标签都有自己独特的name属性和id属性。
value是默认的显示值，比如submit的input中value默认为提交，reset的input中value默认为重置，如果不喜欢默认显示的内容，就改掉value即可。

显示的页面如下：
在这里插入图片描述

单选按钮（Radio Buttons）

单选框必填type,name,value三个属性，
其中name必须相同，代表同一个命名组，逻辑上就会只能出现单选的情况了，如果不相同，就会出现多选也可以的情况。

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

菜鸟教程

复选框（Checkboxes）

复选框的type是checkbox，name的值也要求一直

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

在这里插入图片描述

提交按钮(Submit Button)

定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。然后在那个页面处理输入的数据。

简单的下拉框：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>