HTML——＞表单

最新推荐文章于 2023-07-14 19:00:42 发布
最新推荐文章于 2023-07-14 19:00:42 发布
阅读量271 收藏 2
点赞数 1
分类专栏： 笔记 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55016379/article/details/116478173
版权
笔记 同时被 2 个专栏收录
94 篇文章 0 订阅
订阅专栏
html
11 篇文章 0 订阅
订阅专栏

表单

表单简介

表单的作用

在HTML中，为了实现动态页面，我们需要借助表单来实现

表单包括：文本框，按钮，下拉菜单

学习HTML只需要把效果做出来，不需要需要数据处理

表单标签

表单标签有5种：form，input，textarea，select，option。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>homeclass</title>
	</head>
	<body>
		<div>
			<form method="post">
				昵称:<input type="text"/><br/>
				密码:<input type="password"/><br/>
				邮箱:<input type="text"/>
				<select>
					<option>qq.com</option>
					<option>136.com</option>
					<option>777.com</option>
				</select>
				<br/>
				性别:<input type="radio" name="sex" value="男" checked="checked">男
				<input type="radio" name="sex" value="女"/>女
				<br/>
				爱好:<input type="checkbox" name="hobby" value="旅游"/>旅游
				<input type="checkbox" name="hobby" value="摄影"/>摄影
				<input type="checkbox" name="hobby" value="运动"/>运动
				<br/>
				个人简介:
				<br/>
				<textarea rows="10" cols="40">		
				</textarea>
				上传个人图片:
				<input type="file">
				<hr/>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" value="立即注册">
			</form>
		</div>
	</body>
</html>
homeclass
昵称:
密码:
邮箱: qq.com 136.com 777.com
性别:男 女
爱好:旅游 摄影 运动
个人简介:
上传个人图片:
                         

所以，我们可以把表单分为一下8种：

  • 单行文本框
  • 密码文本框
  • 单选框
  • 复选框
  • 按钮
  • 文件上传
  • 多行文本框
  • 下拉列表

form标签

form标签简介

建立一个表单，必须把所有表单标签放在form标签内部

表单指的是文本框、按钮、单选框、复选框、下拉列表

语法结构:

<form>
各种表单标签</form>

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form标签</title>
	</head>
	<body>
		<form>
			<input type="text" value="这是一个单行文本框"/><br/>
			<textarea>这是一个多行文本框</textarea><br/>
			<select>
				<option>HTML</option>
				<option>CSS</option>
				<option>JavaScript</option>
			</select>
		</form>
	</body>
</html>
form标签
这是一个多行文本框
HTML CSS JavaScript

input,textarea,select,option都是表单标签，必须要放在form标签内部。

form标签属性

form标签属性

属性说明
name表单名称
method提交方式
action提交地址
target打开方式
enctype编码方式
  1. name属性：< form name=“表单名称” >< /form >
  2. method属性：method属性有两个属性值：一个是“get”，另一个是“post”，对于get，post的安全性较好，所以在实际开发中，大多数使用的是post。
  3. action属性：用于指定表单数据提交到哪一个地址进行处理
  4. target属性：用于指定窗口的打开方式，一般只会用到“_blank”这一属性值
  5. enctype属性：用于指定表单数据提交的编码方式。一般不需要设置

input标签

在HTML中，大多数表单都是使用input标签来实现的

语法结构：

<input type="表单类型"/>

input是自闭合标签，它是没有结束符号的

input标签的type属性取值

属性值浏览器效果说明
text单行文本框
password密码文本行
radio单选框
checkbox复选框
button或submit或reset按钮
file文件上传

所以，表单的类型就是由type属性的取值决定的

单行文本框

单行文本框的简介

语法结构：

<input type="text"/>

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input标签</title>
	</head>
	<body>
		<div>
		<form method="post">
			姓名:<input type="text"/><br/>
			姓名:<input type="text" value="dwx">
		</form>
		</div>
		<div>
			<form method="post">
				姓名:<input type="text"size="20"/><br/>
				姓名:<input type="text" size="10"/>
			</form>
		</div>
		<div>
			<form method="post">
				姓名:<input type="text"/><br/>
				姓名:<input type="text" maxlength="5">
				
			</form>
		</div>
	</body>
</html>
input标签
姓名:
姓名:
姓名:

单行文本框属性

属性说明
value设置单行文本框的默认值，也就是默认状况下单行文本框显示的文字
size设置文本框的长度
maxlength设置单行文本框中最多可以输入的字符数

密码文本框

密码文本框简介

特点：在单行文本框中，输入的字符是可见的，在密码文本框中，输入的字符是不可见的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>密码文本框</title>
	</head>
	<body>
		<form method="post">
			账号:<input type="text" size="15" maxlength="10"/><br/>
			密码:<input type="password" size="15" maxlength="10"/>
		</form>
	</body>
</html>
密码文本框 账号:
密码:

语法结构：

<input type="password"/>

密码文本框属性

密码文本框属性

属性说明
value设置密码文本框的默认值，也就是默认情况下密码文本框显示的文字
size设置密码文本框的长度
maxlength设置密码文本框中最多可以输入的字符数

单选框和复选框

单选框简介

在HTML中，单选框也是使用input标签实现的，其中type属性取值为“radio”

语法结构：

<input type="radio" name="单选框组名" value="取值"/>

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置

默认情况下选中一个单选框：使用checked属性来实现

复选框

在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项

语法结构：

<input type="checkbox" name="组名" value="取值">

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置

默认情况下选中一个单选框：使用checked属性来实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单选框和复选框</title>
	</head>
	<body>
		<h3>单选框</h3>
		<hr/>
		<div>
			<form method="post">
				性别:
				<input type="radio" name="sex" value="男"/>男
				<input type="radio" name="sex" value="女"/>女
			</form>
		</div>
		<div>
			<form method="post">
				性别:
				<input type="radio" name="sex1" value="男"/ checked="checked">男
				<input type="radio" name="sex1" value="女"/>女
			</form>
		</div>
		<div>
			<form method="post">
				性别:
				<label><input type="radio" name="sex2" value="男"/ checked="checked">男</label>
				<label><input type="radio" name="sex2" value="女"/>女</label><br/>
				年龄:
				<label><input type="radio" name="age" value="80后">80后</label>
				<label><input type="radio" name="age" value="70后">70后</label>
				<label><input type="radio" name="age" value="60后">60后</label>
			</form>		
		</div>
		<hr/>
		<h3>复选框</h3>
		<div>
			<form method="post">
				你喜欢吃的水果:
				<label><input type="checkbox" name="fruit" value="西瓜"/>西瓜</label>
				<label><input type="checkbox" name="fruit" value="菠萝"/>菠萝</label>
				<label><input type="checkbox" name="fruit" value="橙子"/>橙子</label>
			</form>
		</div>
		<hr/>
	</body>
</html>
单选框和复选框

单选框

性别: 男 女
性别:

按钮

在HTML中，常见的按钮有3种：普通按钮(button),提交按钮(submit),重置按钮(reset)

普通按钮button

在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的

语法结构：

<input type="button" value="取值">


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
		<script>
			window.onload = function ()
			{
				var oBtn = document.getElementsByTagName("input");
				oBtn[0].onclick = function ()
				{
					alert("I love HTML!");
				};
			}
		</script>
	</head>
	<body>
		<form method="post">
			<input type="button" value="表白">
		</form>
	</body>
</html>
按钮

提交按钮submit

语法结构：

<input type="submit" value="取值">

这里的“取值”就是按钮上的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
	</head>
	<body>
		<!--普通按钮和提交按钮-->
		<div>
			<form>
				<input type="button" value="普通按钮"/>
				<input type="submit" value="提交按钮"/>
			</form>
		</div>
		<!--重置按钮-->
		<hr/>
		<div>
			<form method="post">
				账号:<input type="text"/><br/>
				密码:<input type="password"/><br/>
				<input type="reset" value="重置"/>
			</form>
		</div>
		<hr/>
		<div>
			<form>
				<input type="button" value="按钮"/>
				<input type="submit" value="按钮"/>
				<input type="reset" value="按钮"/>
			</form>
		</div>
	</body>
</html>
按钮
账号:
密码:

重置按钮reset

在HTML中，重置按钮一般用于清理用户在表单中输入的内容

重置按钮只能清除在同一个< form >< /form>中结构的用户输入的内容

button标签

我们现在用的各种按钮都是使用input标签实现的，而还可以使用button标签来实现

语法结构：

<button></button>

不过我们现在就基本不会使用了

文本上传

在HTML中，我们只用专注于如何做出页面效果，对于具体怎么实现功能现在不需要去深究

语法结构：

<input type="file"/>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文件上传</title>
	</head>
	<body>
		<form method="post">
			<input type="file"/>
		</form>
	</body>
</html>
文件上传

多行文本框

对于单行文本框，我们使用的是input标签，type属性是text。而多行文本框，使用的是< textarea >< /textarea>标签。

语法结构：

<textarea row="行数" cols="列数" value="取值">默认内容</textarea>

默认内容是直接在多行文本框中展现的内容，row来规定多行文本框的行数，cols来规定多行文本框的列数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多行文本框</title>
	</head>
	<body>
		<form method="post">
			个人介绍:<br/>
			<textarea rows="5" cols="20" value="自我介绍">请介绍一下自己:</textarea>
			<input type="reset" value="重置">
		</form>
	</body>
</html>
多行文本框 个人介绍:
请介绍一下自己:

下拉列表

下拉列表简介

在HTML中，下拉列表是由select和option这两个标签配合使用来表示的

语法结构：

<select>
    <option>选项内容</option>
    ......
    <option>选项内容</option>
</select>

select标签属性

在HTML中，select标签的常用属性有两个

select标签的常用属性

属性说明
multiple设置下拉列表可以选择多项
size设置下拉列表显示几个列表项，取值为整数

在默认情况下，下拉列表只能选择一项，如果需要选入多个选项，使用“Ctrl+鼠标左键”来选取

option标签

在HTML中，option标签的常用属性有两个

option标签的常用属性

属性说明
selected是否选中
value选项值

selected属性就是和单选框中的checked属性一样，表示默认情况下被选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表</title>
	</head>
	<body>
		<div>
		<form method="post">
			<select>
				<option>HTML</option>
				<option>CSS</option>
				<option>JavaScript</option>
			</select>
			
		</form>
		</div>
		<hr/>
		<!--多选下拉列表-->
		<div>
			<form method="post">
				<select multiple="multiple" size="3">
					<option>HTML</option>
					<option>CSS</option>
					<option>JavaScript</option>
					<option>China</option>
					<option>English</option>
					<option>Japan</option>
					<option>Math</option>
				</select>
			</form>
		</div>
		<hr/>
		<div>
			<form method="post">
				<select>
					<option>HTML</option>
					<option>CSS</option>
					<option>JavaScript</option>
					<option>China</option>
					<option>English</option>
					<option>Japan</option>
					<option>Math</option>
				</select>
			</form>
		</div>
	</body>
</html>
下拉列表
HTML CSS JavaScript 
	</form>
	</div>
	<hr/>
	<!--多选下拉列表-->
	<div>
		<form method="post">
			<select multiple="multiple" size="3">
				<option>HTML</option>
				<option>CSS</option>
				<option>JavaScript</option>
				<option>China</option>
				<option>English</option>
				<option>Japan</option>
				<option>Math</option>
			</select>
		</form>
	</div>
	<hr/>
	<div>
		<form method="post">
			<select>
				<option>HTML</option>
				<option>CSS</option>
				<option>JavaScript</option>
				<option>China</option>
				<option>English</option>
				<option>Japan</option>
				<option>Math</option>
			</select>
		</form>
	</div>
</body>
省级干饭王
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML入门（8）
m0_62368676的博客
11-27 529
这篇介绍一下HTML中的表单。 表单和表格、列表不同。使用之前学过的标签只能做出静态画面，如果要做出动态页面，需要表单来实现。表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。在HTML学习中要做的仅仅是把登录注册、话费充值这些表单的页面效果做出来就可以了，在服务器处理这些信息则是后端技术的范畴。 类似注册登录、话费充值、评论的网页都用到了表单 文本框、按钮、下拉菜单都是表单的常用元素。 在HTML中，表单标签有5种：form、input、textarea、selec.
使用文本标签做一个简单的自我介绍
范玖久的博客
06-03 5273
简单的自我介绍实现 做成表格形式（六行两列的表格） 表格的第一行填写基本信息，使用图片标签 表格的第二行为联系方式，包含超链接标签 表格的第三行为家庭信息，使用有序列表标签 表格的第四行为学籍信息 表格的第五行为出生年月 表格的第七行为兴趣爱好,使用无序列表标签 具体实现代码： <!DOCTYPE html> <html> <head> <met...
表单开发(二):获取单选按钮，多行文本框，下拉菜单，捆绑元素数据，用户注册
tuke_tuke的博客
07-27 2012
单选按钮：<input type="radio"> 多行文本框：<textarea rows="5" cols="30"></textarea> 下拉菜单：seclet option <select name="home" ><!--下拉列表--> <option value="北 京">北 京</option>
[HTML]表单form的method属性get/post区别
solo_Insomnia的专栏
09-12 3070
一、问题的提出    action="getPostServlet/getPost.do?param4=param4" method="get">                      button1" value="submit"> 注意到表单中action：getPostServlet/getPost.do?param4=param4 这个action带有一个参数pa
输入多行文本框 表单_HTML表单：通用文本输入
cungui5726的博客
08-16 1487
输入多行文本框 表单A typical form will require details from the user such as first and last name, city, address, and postal code. Such generic single-line responses should be gathered in a generic text <inp...
HTML——表单详解
最新发布
wshwsh_的博客
07-14 1万+
HTML——表单的详细解析
vscode——HTML——表单
iheyu(一个新手小白女PHP初学者)
08-21 4726
1.表单是收集用户信息输入——>发送——>或提交给服务器： 2.表单分为二大类： 1.输入：内容——>文本——>普通和密码——>单选框——>多选框——>下拉框； 2.提交：提交按钮——>http：——>超文本传输协议——>主要保持客户级和服务级的通信——>浏览器和服务器的通讯； 3.模式：请求——>应答——>浏览...
html——表单元素
chhhhh0403的博客
04-22 1286
以下文章主要探讨 HTML5 中表单元素，表单元素用于获取用户的输入数据，以及HTML5 中表单中 input 元素的 type 属性，根据不同的值来显示不同的输入框。 一．表单元素总汇 1.基础表单元素 在 HTML5 的表单中，提供了各种可供用户输入的表单控件。 元素名称 说明 form 表示 HTML 表单 input 表示用来收集用户输入数据的控件 tex
HTML——form表单
Gratain的博客
10-22 95
from表单 1.........input标签————————————type=""属性的取值 2.........select标签————————————下拉列表框 3.........textarea标签———————————文本域（宽或高） 字体大小 1...input标签 type=""属性的取值； text 文本框 password 密码框 submit 提交按钮 radio 单选按钮...
HTML——表单类的标签
weixin_54327001的博客
11-16 7428
第1关：表单元素——文本框 你可以使用<input>标签来创建一个输入框，使用type属性来指定input元素的类型，使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。 这里type="text"，表示普通文本的输入。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-
HTML标记语言——表单
01-19
上文：标记语言——引用 原文出处 chapter 5 表单 互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从使用者那里收集资料,因此在设计网站时总是属于任何状况都...
nicejforms——美化表单不用愁
10-31
nicejforms——美化表单不用愁 nicejforms是一个基于jQuery的插件，它可以对表单进行美化，提供了多种样式的选择，极大程度地提高了表单的可读性和美观性。下面是对nicejforms的详细介绍： 什么是nicejforms？ ...
初探jquery——表单应用范例
10-31
### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...
HTML学习笔记（五）——表单
01-08
在HTML中创建表单，主要使用`<form>`标签。例如： ```html <form action="submit.php" method="post"> <!-- 表单内容 --> </form> ``` 这里的`action`属性指定了处理表单数据的服务器端脚本，`method`属性则规定了...
用python写Hello World
热门推荐
qq_55016379的博客
03-02 2万+
用python写Hello World 运行python程序有两种方式：交互式和文件式 交互式 交互式又可分为通过cmd运行和通过IDLE远行两种 这种方式写的Python代码是输入一行，执行一行 通过cmd运行hello world 打开cmd 在命令控制栏输入python进入python解释器 在>>>后输入print（“hello world”） 通过IDLE运行hello world 点击python IDLE进入解释器 在file中新建或打开一个python文件 在文件中
Python——＞基本统计值计算
qq_55016379的博客
04-12 4906
基本统计值计算 这一一个计算多数据基本统计值得实例 程序包含求平均数，方差，中位数 Python的列表数据结构能够支持基本的数据统计应用 问题的IPO流解析： 输入 ：用户，文件，网络等输入数据 处理：适当的结构和算法 输出：平均值，方差，中位数 from math import sqrt def getNum(): nums = [] iNumStr = input("请输入数字(直接输入回车退出):") while iNumStr != "": nums.appe
python math库函数
qq_55016379的博客
03-14 3907
python math库函数 math库概括 模块编程：需要用import调用库的编程方式 简洁：math库是python提供的内置数学类函数库，因为复数类型常用于科学计算，一般计算并不常用，因此math函数不支持复数类型，仅支持整数和浮点数运算。 math函数一共提供了4个数学常数和44个函数。44个函数分为4类，包括16个数值表示函数，8个幂对数函数，16个三角对数函数和4个高等特殊函数。 math库解析 math库的数学常数（共4个） 常数 数学表示 描述 math.pi π 圆周率，
用正则表达式进行搜索
qq_55016379的博客
08-13 3812
用正则表达式进行搜索 正则表达式的介绍 正则表达式的使用环境 如果你想从一个文本文件中提取电话号码 如果你需要查找名字中间有数字的所有文件 如果你想在一个文本块中找到所有重复的单词 如果你想替换一个页面中的所有URL为这些URL的实际HTML链接 基本字符匹配 语法结构 SELECT 列名 FROM 表格 WHERE 列名 REGEXP 'XX' ORDER BY 列名 表示返回列中列名中包含(XX)子列的所有行 除了关键字LIKE被REGEXP代替外，这个语法结构和LIKE的语句相同 LIKE与RE
Python——＞jieba库的使用
qq_55016379的博客
04-13 3371
jieba库的使用 jieba是Python中的一个非常重要的一个第三方中文分词函数库 因为jieba库是第三方函数库，需要通过下载才能引用，不会第三方库下载的可以参考我的之前的第三方库引用对的笔记 jieba库的概述 jieba（“结巴”）是Python中一个重要的第三方中文分词函数库 分词原理：jieba分词原理是利用一个中文词库，将待分词的内容与分词词库进行比对，通过图结构和动态规划方法找到最大概率的词组。除了分词，jieba还提供增加自定义中文单词的功能 jieba库支持的三种分词模式 精确模式：
表单元素——label 标签
05-25
label 标签是一个HTML表单元素，它通常与 input 元素一起使用，为表单元素创建标注。当用户单击标注时，与之关联的表单元素就会获得焦点。例如： ```html <label for="username">用户名：</label> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值