HTML表单

最新推荐文章于 2022-05-25 12:39:33 发布
最新推荐文章于 2022-05-25 12:39:33 发布
阅读量160 收藏 1
点赞数
分类专栏： HTML学习篇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39036700/article/details/80642302
版权

HTML表单：表单是一个包含表单元素的区域。

    表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置。


HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

First name: 
Last name: 

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password: 

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

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

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

浏览器显示效果如下:

Male
Female

复选框（Checkboxes）

<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>

浏览器显示效果如下:

I have a bike
I have a car

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

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

<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" 的页面。该页面将显示出输入的结果。

实例:

1、创建文本字段

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>创建文本字段</title> 
</head>
<body>
​
	<form action="">
	 First name:<input type="text" name="firstname"><br>
	  Last name:<input type="text" name="lastname">
	</form>
​
	<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
​
</body>
</html>

效果：


2、创建密码字段

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建密码字段</title>
</head>
<body>
	<form action="">
		Username: <input type = "text" name = "user"><br>
		Password : <input type = "password" name = "pwd"><br>
	</form>
	<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>
</body>
</html>

效果：


3、单选按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选按钮</title>
</head>
<body>
	<form action="">
		<input type = "radio" name = "sex" value = "male">Male<br>
		<input type = "radio" name = "sex" value = "famale">Famale<br>
	</form>
	<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>
</body>
</html>

效果：


注意：表单中的单选按钮可以设置以下几个属性：value、name、checked

  •  value：提交数据到服务器的值（后台程序PHP使用）
  •  name：为控件命名，以备后台程序 ASP、PHP 使用
  •  checked：当设置 checked="checked" 时，该选项被默认选中

4、复选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
	<input type = "checkbox" name = "vehicle" value = "Bike">I have a bike.<br>
	<input type = "checkbox" name = "vehicle" value = "Car">I hava a car.<br>
	<p><b>注意：</b>复选框可以同时选择多个。</p>
</body> 
</html>

效果：


5、简单的下拉列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的下拉列表</title>
</head>
<body>
	<form action="">
		<select name = "Cars">
			<option value = "volvo">Volvo</option>
			<option value = "saab">Saab</option>
			<option value = "fiat">Fiat</option>
			<option value = "audi">Audi</option>
		</select>
	</form>
</body>
</html>

效果：


6、预选下拉列表

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的下拉列表</title>
</head>
<body>
	<form action="">
		<select name = "Cars">
			<option value = "volvo">Volvo</option>
			<option value = "saab">Saab</option>
			<option value = "fiat" selected>Fiat</option>
			<option value = "audi">Audi</option>
		</select>
	</form>
</body>
</html>

效果：


7、文本域

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
	<textarea rows="10" cols="30">
	我是一个文本框。
	</textarea>
</body>
</html>

效果：


8、创建按钮

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建按钮</title>
</head>
<body>
	 <form action="">
	 	<input type = "button" value = "Hello Word!">
	 </form>
</body>
</html>

效果：


9、带有边框的表单

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带边框的表单</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="10">
		</fieldset>
	</form>
</body>
</html>

效果：


10、带有输入框和确认按钮的表单

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带有输入框和确认按钮的表单</title>
</head>
<body>
	<form action="">
	 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>

效果：


11、带有复选框的表单

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带有复选框的表单</title>
</head>
<body>
	<form action="">
		<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  		<input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  		<input type="submit" value="提交">
	</form>
</body>
</html>

效果：


12、带有单选框的表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带有单选按钮的表单</title>
</head>
<body>
	<form action="demo-form.php" method="get">
  		<input type="radio" name="sex" value="Male"> Male<br>
  		<input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  		<input type="submit" value="提交">
	</form>
</body>
</html>

效果：


12、从表单发送电子邮件

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>从表单发送电子邮件</title>
</head>
<body>
	<form action="MAILTO:someone@example.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 email"><br>
		Comment:<br>
		<input type="text" name="comment" value="your comment" size="50"><br><br>
		<input type="submit" value="发送">
		<input type="reset" value="重置">
	</form>
		
</body>
</html>

效果：



小韩学长
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表单（详解网页表单如何实现）
百赢出品，必属精品
04-24 2915
HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。元素用于为表单元素添加标签，提高可访问性。
20.4 HTML 表单1
最新发布
08-04
在网页设计中，HTML表单扮演着至关重要的角色，它们允许用户与网站进行互动，如填写信息、搜索内容、提交反馈等。本主题主要探讨“20.4 HTML 表单1”的相关知识点。 一、HTML表单基本结构 HTML表单通过`<form>`...
表单元素（控件）不可见，你用visibility还是display？(转)
weixin_34232363的博客
11-23 153
属性大比拼：visibility和display的介绍 今天在做一个表单时涉及到这方面，当选中相应的选项后设置相应的几个元素（控件可见或不可见），后来还是用了visibility来实现。我们先来看下visibility对应的几个属性的介绍： visibility:visible /*元素可见，默认值*/ visibility:hidden /*元素不可见，但仍然为其保留相应的空间*/...
表单元素（控件）不可见，你用visibility还是display？
weixin_34116110的博客
08-18 273
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML中的表单
qq_51735681的博客
04-29 143
HTML中的表单： 表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置 多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。 大多数经常被用到的输入类型如下： 文本域（Text Fields） 文本域通过<input type="text"> 标签来设定，当
HTML 表单制作
热门推荐
千寻的博客
09-19 2万+
HTML 表单 用于收集不同类型的用户输入。 表单是一个包含表单元素的区域 表单元素是允许用户在表单中输入内容, 比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等 表单使用表单标签 来设置 HTML 表单-输入元素 多数情况下被用到的表单标签是输入标签（）。 输入类型是由类型属性（type）定义的。 文本域（Text Fie...
HTML表单制作
jxcklfn的博客
05-25 2217
为什么写表单？（目的是为了收集用户信息） 表单的组成：表单域、表单控件（也称表单元素）和提示信息3个部分构成。 在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递 <form>会把它范围内的表单元素信息提交给服务器 <form action=''url地址'' methid=''提交方式'' name=''表单域名称''> 各种表单元素的控件 </form> input输入表单元素 <input>标签.
html表单提交
THE ORDER
02-02 8387
1. 表单属性设置 <form>标签 表示表单标签，定义整体的表单区域 action属性 设置表单数据提交地址 method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写 2. 表单元素属性设置 name属性 设置表单元素的名称，该名称是提交数据时的参数名 value属性 设置表单元素的值，该值是提交数据时参数名所对应的值 3. 示例代码 <form action="https://www.baidu.com" method="GET">
深入理解html表单输入监听
09-28
下面小编就为大家带来一篇深入理解html表单输入监听。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
表单智能填充，数据复制到文本域，智能填充到表单，html表单提交
05-27
html，表单自动填充，避免重复性工作，一个一个填写，复制粘贴到文本域，自动识别对应表单属性，复制之后自动识别，点击提交就行了。超级简单，有什么不懂的可以直接私信问我。
HTML表单标记教程(3):输入标记
12-13
HTML表单标记教程,这节主要讲解如何在网页中使用INPUT标记,主要介绍INPUT标记的属性的使用. 输入标记<input>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。 基本语法 01 <Form> 02 &...
清除HTML表单问题
04-03
在网页开发中，HTML表单是用户与网页交互的重要元素，用于收集用户输入的数据。当涉及到表单数据的清除时，开发者可能会遇到一些问题。在这个场景中，标题"清除HTML表单问题"提示我们，讨论的重点是如何有效地清空或...
asp.net获取HTML表单File中的路径的方法
10-26
主要介绍了asp.net怎么获取HTML表单File中的路径,需要的朋友可以参考下
form表单不可见_HTML中表单及表单域的相关操作
weixin_32461163的博客
01-30 1151
<form> 标签用于为用户输入创建 HTML 表单 , 表单用来与用户交互并提交数据1、表单操作<1>表单获取方式[1] document.getElementById()[2] document.forms[index];[3] document.forms[form_name][4] document.form_name例：<!DOCTYPE html> ...
HTML表单传值示例通过get方式传递
12-13
HTML表单是网页中用于收集用户输入数据的重要元素，它允许用户与服务器进行交互。在本示例中，我们探讨了如何通过GET方法在HTML表单中传递值，并查看服务器如何接收这些值。 首先，让我们深入理解HTML表单的基本...
HTML 表单组件实例代码
09-28
本文通过实例代码给大家介绍了HTML 表单组件的知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
html表单
05-31
HTML表单是一个用户界面元素，它包含用于收集用户输入的各种表单元素，例如文本输入框、下拉列表、单选按钮、复选框等。当用户提交表单时，它将被发送到服务器进行处理。以下是一个简单的HTML表单示例： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值