表单相关标签（＜input＞＜fieldset＞＜button＞＜select＞＜label＞）

最新推荐文章于 2021-01-11 01:01:25 发布

远方有只兔子~

最新推荐文章于 2021-01-11 01:01:25 发布

阅读量527

点赞数

分类专栏： html+css 文章标签： html html5

本文链接：https://blog.youkuaiyun.com/qq_43812504/article/details/110562962

版权

html+css 专栏收录该内容

22 篇文章

订阅专栏

这篇博客详细介绍了HTML5中与表单相关的元素，包括`<input>`标签及其`type`属性，如文本框、下拉列表的创建，`<label>`标签用于提升表单控件的可用性，`<fieldset>`和`<legend>`用于组织和标记表单内容，以及`<button>`的不同类型。文中还强调了在HTML和XHTML中单标签的使用规范，并提供了实际示例。

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

表单：`<from></form>`

<form name="" method="" action=""></form>
<!--action:规定当提交表单时向何处发送表单数据。
	method: get/post 规定用于发送表单数据的 HTTP 方法。
-->

<form> 元素包含一个或多个如下的表单元素：

<input>
<textarea>  ：文本框
<button>   ：按钮
<select>  ：下拉列表
<option>   ： <option> 标签定义下拉列表中的一个选项（一个条目）。
<optgroup>   ： <optgroup> 标签经常用于把相关的选项组合在一起。
<fieldset>  ：将表单内的相关元素分组。
<label> ： 为 input 元素定义标注（标记）。

input标签：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

运行结果：
在这里插入图片描述

input常见type属性值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input的type</title>
</head>
<body>
 <!-- 常见input的type类型 -->
    <!-- 文本 -->
    <input type="text">
    <br>
    <!-- 密码 -->
    <input type="password">
    <br>
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">
    <br>
    <!-- 提交按钮 -->
    <input type="submit">
    <br>
    <!-- 重置按钮 -->
    <input type="reset">
    <br>
    <!-- 单选按钮 -name属性用来连接一组单选按钮-->
    <input type="radio" name="sex" disabled>男
    <input type="radio" name="sex" >女 
    <br>
    <!-- 复选框 -->
    <!-- disabled禁选disabled="disabled"  checked="checked"默认选中-->
    <h2>喜欢的偶像</h2>
    <input type="checkbox" name="like" checked>高圆圆
    <input type="checkbox" name="like">李易峰
    <input type="checkbox" name="like">杨幂
    <br>
    <h2>喜欢的名字</h2>
    <input type="checkbox" name="like2">xx
    <input type="checkbox" name="like2" disabled>yy
    <input type="checkbox" name="like2">ff
    <br>
    <h2>喜欢的运动</h2>
    <input type="checkbox" name="like3">足球
    <input type="checkbox" name="like3">篮球
    <input type="checkbox" name="like3">排球

 
   <!-- 拾色器 -->
   <h3>拾色器</h3>
   <input type="color">

       
</body>
</html>

运行结果：
在这里插入图片描述

checked 属性规定在页面加载时默认选中的
在html中单标签可以不加斜杠<input type="checkbox">
在XHTML中单标签必须写斜杠<input type="checkbox"/>

`<textarea>` ：文本框

cols属性规定文本区域内可见的行数。
rows属性规定文本区域可见的列数。
disabled属性规定禁用文本区域。
CSS属性： resize: none; 表示文本框禁止拖拽,用户无法调整元素的尺寸。

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

`<select>`下拉列表

multiple：当该属性为 true 时，可选择多个选项。
size="number" 规定下拉列表中可见选项的数目

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

在这里插入图片描述

<button>按钮标签：

<button type="button" onclick="alert('你好，世界!')">点我!</button>

type：button/reset/submit 规定按钮的类型。

`<fieldset>` 标签：

相当于一个方框，在字段集中可以包含文本和其他元素。
该元素用于对表单中的元素进行分组并在文档中区别标出文本。
fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。
disabled定义空间禁止使用（整个一组内容将禁止使用）；
<legend align="left/center/right/justify"></legend> 作为字段集标题
legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

在这里插入图片描述

`<label>`标签：

label标签不会向用户呈现任何特殊效果，不过，它为鼠标用户改进了可用性，用户点击在`中的内容时，浏览器会自动将焦点转到和label相关的表单控件上。
label与表单控件实现联系的关键就是的for属性，for属性值要与相关元素的id属性相同。

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