html初学第四课表单

最新推荐文章于 2022-04-24 17:19:42 发布

珹先生

最新推荐文章于 2022-04-24 17:19:42 发布

阅读量136

点赞数

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

本文链接：https://blog.csdn.net/giantleech/article/details/111681582

版权

初学专栏收录该内容

136 篇文章 4 订阅

订阅专栏

html初学第四课

表单

表单的元素格式用
<input type=“text” name=“fname” value=“text”/>来定义，text为所要用的元素类型，name为元素名称，value为初始值

1、文本框text

使用方式为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        	<input type="text">
			<input type="submit">
	</body>
</html>

运行后得到的结果为：
在这里插入图片描述

2、密码框password

使用代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        	<input type="password">
			<input type="submit">
	</body>
</html>

运行后得到如下结果：
在这里插入图片描述
可以看到，密码框在输入内容后，所输内容为隐藏状态，用黑点或者*表示，提高了安全性。

3、单选按钮radio

单选按钮的应用代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        	<form action="#">
        				<input type="radio" name="radio" value="885"> 88.5<br/>
        				<input type="radio" name="radio" value="897">89.5 <br/>
        				<input type="radio" name="radio" value="101.1">101.5 <br/>
        				<input type="radio" name="radio" value="97.5"> 97.5<br/>
        				<input type="submit">
        			</form>
	</body>
</html>

运行后得到如下显示：
在这里插入图片描述
可以在选择项之前选择，但是同时只能选择其中一个数据。

4、复选框checkbox

复选框的代码使用如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        	<form action="#" method="post">
        		<p>请选择你的兴趣爱好</p>
        		<p><input type="checkbox" name="hobby" value="sports"/>体育
        		<input type="checkbox" name="hobby" value="music"/>音乐
        		<input type="checkbox" name="hobby" value="movie"/>电影
        		<input type="checkbox" name="hobby" value="read"/>阅读
        		<input type="checkbox" name="hobby" value="food"/>烹饪
        		<input type="submit" name="确认提交"  />
        		</p>
        	</form>
	</body>
</html>

运行后得到如下结果：
在这里插入图片描述
复选框的作用在于可以同时选择多个按钮，并不是只能选择其中一个了。

5、列表框select

列表框较前面的语法有一些区别，需要先用select语法确定类别的名称和行数，然后用option来定义列表里可以选择的内容，用selected来定义默认首选项，具体用法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        	<form action="#">
        		<select name="job" >
        			<option value ="teacher">教师</option>
        			<option value ="student">学员</option>
        			<option value ="worker">工人</option>
        			<option value ="encourage">鼓励师</option>
        			<option value ="wise" selected>法师</option>
        		</select>
        		    <input type="submit">
        	</form>
	</body>
</html>

运行后得到如下结果：
在这里插入图片描述

6、按钮

按钮的语法一般用reset、和button来表示，其中reset表示重置按钮、button表示普通按钮
具体用法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="#">
        	<input  type="reset" name="butReset" value="reset按钮">
			<input  type="button" name="butButton" value="button按钮"/>


        	</form>
	</body>
</html>

运行后得到如下所示：
在这里插入图片描述

7、文本域textarea

具体使用如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="#">
		<textarea name="words" rows="30" cols="100">
		</textarea>
		<input type="submit">
		</form>
	</body>
</html>

运行后得到如下结果：
在这里插入图片描述

8、文件域file

具体使用如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="#">
		<input type="file" name="files">
		<input type="submit" name="upload"  value="点我上传文件" /> 
		</form>
	</body>
</html>

运行后得到如下结果:
在这里插入图片描述

9、邮箱email

具体使用如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="#">
		<input type="email" name="mail" />
		<input type="submit" />
		</form>
	</body>
</html>

运行后得到如下效果：
在这里插入图片描述
可以看出，email语法可以对所填内容是否为邮箱格式做一个简单的验证，不满足条件的内容无法提交

10、网址url

具体用法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="#">
		<input type="url" name="url" />
		<input type="submit" />
		</form>
	</body>
</html>

运行后得到如下结果：
在这里插入图片描述
如上所示，网址也跟邮件一样，对所填内容的格式做一个简单的验证

11、数字number

具体使用如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#">
		<input type="number" name="num" min="0" max="100" step="1" value="1" />
		<input type="submit" />
		</form>
	</body>
</html>

运行后得到如下结果：
在这里插入图片描述
可以根据设置的参数进行选择后提交

12、滑块range

具体使用如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#">
		<input type="range" name="rng" min="0" max="100" value="1" />
		<input type="submit" />
		</form>
	</body>
</html>

运行后得到如下结果：
在这里插入图片描述
可以用鼠标对进度条滑动

13、搜索框search

具体使用如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#">
		<input type="search" name="srh" />
		<input type="submit" />
		</form>
	</body>
</html>

运行后得到如下所示：
在这里插入图片描述
因为搜索需要搜索引擎支持，所以这里只做展示，实际上并不具备搜索的实际效果

总结

在这里插入图片描述
以上是表单的介绍，谢谢。

珹先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html初学第四课表单

html初学第四课表单表单的元素格式用<input type=“text” name=“fname” value=“text”/>来定义，text为所要用的元素类型，name为元素名称，value为初始值1、文本框text使用方式为：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head>
复制链接

扫一扫