web前端开发基础－－－制作表单类页面

搁浅小泽

已于 2024-07-14 20:53:25 修改

阅读量326

点赞数

文章标签：前端 html

于 2023-10-16 19:18:05 首次发布

本文链接：https://blog.csdn.net/m0_64148419/article/details/133865964

版权

本文详细介绍了如何在HTML中创建用户登录表单，包括

摘要由CSDN通过智能技术生成

1.制作用户登录表单

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
		<form action="" method="post"><!-- 定义表单的标签 -->
			<fieldset><!-- 在相关表单控件周围绘制边框 -->
				<legend>用户登录表单</legend><!-- 为这一组表单控件定义标题 -->
				
				<label>
					用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
				</label>
				
				<label>
					密码：<input type="password" id="userPassword"/>
				</label>
				<br /><br />
				<input type="submit" value="提交" id="submitBtin"/>
			</fieldset>
		</form>
		
		<form>
			<fieldset>
				<legend>用户登录表单</legend>
				<p>方式一</p>
				<label>
					用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
					
				</label>
				<p>方式二</p>
				<label for="userName">用户名：</label>
				<input type="text" id="userName" placeholder="请输入用户名">
			</fieldset>
			
		</form>
		
		
		
	</body>
</html>

2. 表单的结构

<from>标签是所有表单控件的基本容器

</form>

每一个from标签都有一个action属性,其定义了提交数据的URL。

Method属性，定义了提交表单数据的两种方式get和post

Get方式：将表单数据以名称/值对的形式附加在action所定义的URL末尾来进行传输，默认情况是采用get方式

注意：

Get中URL中的参数是可见的，所以说是不安全的

URL长度有限的，get方式常用于短表单的数据传递

Post方式：将表单数据放在HTTP头信息中进行传输。（安全）有以下情景

用户上传文件时

表单数据非常长

包含保密的数据

3.<lable>标签

用于为input元素定义描述信息，例如表单控件的名称等，还可以扩大表单控件的焦点区域。

例子：

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

		
		<form>
			<fieldset>
				<legend>用户登录表单</legend>
				<p>方式一</p>
				<label>
					用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
					
				</label>
				<p>方式二</p>
				<label for="userName">用户名：</label>
				<input type="text" id="userName" placeholder="请输入用户名">
			</fieldset>
			
		</form>
		
		
		
	</body>
</html>

4，<fieldset>和<legend>标签（用于将表单控件进行分组）

<fieldset>控件用于在相关表单控件周围绘制边框

<legend>控件用于为这一组表单控件定义标题

5，input输入控件

部分属性如下代码示例

		用户名：<input type="text" id="userName" placeholder="请输入用户名"/>
		<br/>
		密码：<input type="text" id="userPassword"/>
		<br/>
		<input type="submit" value="提交" name ="submitBtn"/>
		<br/>
		<input type="image" src="../img/2ee18-231100-163232346010b0.jpg" width="100px" height="100px"/>