HTML5学习笔记2——表单标签

最新推荐文章于 2022-08-05 20:08:49 发布

糯米味儿的粽子

最新推荐文章于 2022-08-05 20:08:49 发布

阅读量360

点赞数

分类专栏： # HTML 文章标签： html5

本文链接：https://blog.csdn.net/emmm520/article/details/119680639

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML5学习笔记2——表单标签

表单

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

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

表单使用表单标签来设置。

表单是HTML页面与后端实现交互的重要手段。

输入标签-input

输入标签input有如下属性：

属性

type ：指定输入类型，有文本域、密码字段、单选按钮、复选框、提交按钮、文件上传、颜色、日期、数值、按钮等值，值不一样时，显示的控件效果也不同。

name：指定表单元素的名称

value：指定表单元素的初始值

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单标签</title>
</head>
<body>

	<form action="">
		用户名：<input type="text" name="">
		<br><!-- br 换行标签 -->
		<!-- password：密码字段，可以隐藏输入内容-->
		密码：<input type="password" name=""><br>
		兴趣爱好：<input type="checkbox" name="">运动<input type="checkbox" name="">音乐<br>
		<!-- radio：单选按钮，当name值相同时，只能多选一 -->
		性别：<input type="radio" name="gender">男<input type="radio" name="gender">女<br>
		文件上传：<input type="file" name=""><br>
		日期：<input type="date" name=""><br>
		颜色：<input type="color" name=""><br>
		<!-- number：数值选择，max、min规定可选的上下限 -->
		数值选择：<input type="number" max="100" min="0" name=""><br>
		按钮：<input type="button" value="注册" name=""><br>
		提交：<input type="submit" name="submit"><br>
	</form>
	
</body>
</html>

显示效果

在这里插入图片描述

列表框标签-select

select：列表框标签，也叫下拉框标签，此标签和option标签配合使用。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单标签2</title>
</head>
<body>
	<form action="">
		<!-- select：列表框标签，也叫下拉框标签，此标签和option标签配合使用。 -->
		<select name="省份" id="">
			<option value="1">湖北省</option>
			<option value="2">河南省</option>
			<option value="3">江西省</option>
			<option value="4">安徽省</option>
		</select>
	</form>
</body>
</html>

显示效果

在这里插入图片描述

文本域标签-textarea

textarea：文本域标签，可用来做留言板等

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单标签2</title>
</head>
<body>
	<form action="">
		<!-- textarea：文本域标签，rows指定文本区域高度，cols指定文本域宽度 -->
        <!-- 随着在文本域中输入的文本逐渐增多，文本域右侧会自动出现滚动条 -->
		文本域标签：<textarea name="" id="" cols="30" rows="10"></textarea>
	</form>
</body>
</html>

显示效果

文字少时：
在这里插入图片描述
文字多时：

综合案例

1.表格标签+表单标签综合案例

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格表单综合</title>
</head>
<body>

	<!-- 快速方式 table>(tr>td*2)*8，然后tab键 -->
	<table border="1px" width="400px" height="120px" cellspacing="0px">
		<tr>
			<td>用户名</td>
			<td><input type="text" name="username"></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="password"></td>
		</tr>
		<tr>
			<td>性别</td>
			<td><input type="radio" name="sex">男<input type="radio" name="sex">女</td>
		</tr>
		<tr>
			<td>职业</td>
			<td>
				<select name="job" id="">
					<option value="1">web前端开发工程师</option>
					<option value="2">Java开发工程师</option>
					<option value="3">系统架构师</option>
					<option value="4">测试工程师</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>兴趣爱好</td>
			<td>
				<input type="checkbox">运动
				<input type="checkbox">音乐
				<input type="checkbox">阅读
				<input type="checkbox">电子游戏
			</td>
		</tr>
		<tr>
			<td>电话</td>
			<td><input type="text" name="email"></td>
		</tr>
		<tr>
			<td>头像</td>
			<td><input type="file" name="headimage"></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="提交" >
			</td>
		</tr>
	</table>

	
</body>
</html>

显示效果

在这里插入图片描述

糯米味儿的粽子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记2——表单标签

HTML5学习笔记2——表单标签表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签来设置。表单是HTML页面与后端实现交互的重要手段。输入标签-input输入标签input有如下属性：属性type ：指定输入类型，有文本域、密码字段、单选按钮、复选框、提交按钮、文件上传、颜色、日期、数值、按钮等值，值不一样时，显示的控件效果也不
复制链接

扫一扫