html制作简单的表单<form>

2023-11-20

一、使用到的标签用法介绍

1.演示标签代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="/demo/demo_form.asp">
			First name:<br>
			<input type="text" name="firstname" value="Lalisa">
			<br>
			Last name:<br>
			<input type="text" name="lastname" value="Manoban">
			<br><br>
			<input type="submit" value="提交">
		</form> 
	</body>
</html>

2.标签使用具体介绍

1. < form action=“获取/提交的地址” method=“post/get”>
post表示提交,get表示获取
get与post的区别:

  • get请求发送的数据都写在地址栏上,用户可见

  • post请求发送的数据用户不可见

  • get不能提交大量数据,但是post可以
    2.< input type=“类型” name=“自定义名称” value=“显示的文字” style=“设置长宽颜色等样式”>
    input必须放在form标签内才可以生效或提交
    type常见的属性值:

  • text 文本输入框

  • button 普通按钮

  • password 密码输入框

  • submit 提交

  • radio 单选框

  • reset 重置

  • checkbox 复选框

  • file 文本选择框
    style=“width:80px;height:30px;background:white;”

二、表单制作代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://提交的地址" method="post">
			<table width="600px" border="1px" cellspacing="0" cellpadding="">
				<tbody>
					<tr height="40px">
						<td rowspan="4" align="center" style="color: coral;">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr height="40px">
						<td align="right">用户名:</td>
						<td>
							<input type="text" name="loginname" id="" value="" />
						</td>
					</tr>
					<tr height="40px">
						<td align="right">密码:</td>
						<td>
							<input type="password" name="password" id="" value="" />
						</td>
					</tr>
					<tr height="40px">
						<td colspan="2" align="center">
							<input type="submit" name="" id="" value="提交" style="width: 80px;height:30px;background-color: antiquewhite;" />
							<input type="reset" name="" id="" value="重置"  style="width: 80px;height:30px;background-color:blueviolet;" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

三、结果显示

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html制作简单的表单<form> 的相关文章

随机推荐