HTML表单标签

最新推荐文章于 2025-03-29 14:51:39 发布

Sasura_321

最新推荐文章于 2025-03-29 14:51:39 发布

阅读量1k

点赞数 1

分类专栏： Web前端文章标签： HTML 表单标签基础

本文链接：https://blog.youkuaiyun.com/qq_40933663/article/details/87897385

版权

Web前端专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了HTML中的表单标签，包括form标签的使用方法，如GET和POST两种提交方式，并展示了它们在地址栏的表现。同时，还探讨了表单项的设置与美化，通过实例展示了如何提升表单的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单标签form

表单标签：form
    属性：
        action:提交到地址url
        method：提交方式
             1）get方式
             2）post方式
        input标签中必填的属性：
             name属性：给后台标记当前input标签中的内容
             
        get方式和post方式的区别：
             get方式
                1)将用户的信息提交到地址栏了,不安全   
                     地址栏:http://xxxxx?username=zhangsan&pwd=123456
                2)提交的数据大小有限制,不超过4KB 
             post方式
                1)不会将用户的信息提交到地址栏: 在浏览器header
                     实体内容:username: zhangsan  pwd:123456(后期:密码加密)
                2)使用post方式居多,用来上传文件,提交的数据大小无限制

方法用例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签1</title>
	</head>
	<body>
		<!--表单标签：form-->
        <form action="#" method="get">
        	用户名：<input type="text" name="username" /><br />
        	密&nbsp;&nbsp;&nbsp;码：<input type ="password" name="pwd" />
        	<br />
        	<input type="submit" value="注册" />
        </form>
        
        <br /><hr /><br />
        
        <form action="#" mothod="post">
        	用户名：<input type="text" name="username" placeholder="请输入用户名" /> <br />
        	密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" placeholder="请输入密码" />
        	<br />
        	<input type="submit" value="注册" />
        </form>
	</body>
</html>

结果展示

使用get方式的地址栏：
在这里插入图片描述
使用post方式的地址栏：

程序结果：

表单项

表单项：
      其他属性： 
          h5的属性：placeholder：当前input中的默认值
      input type = “test” ：文本输入框
      input type = “password” ：密码输入框
      input type = “redio” ：单选按钮
      input type = “checkbox” ：复选框
      
      select ：下拉菜单
      option ：下拉选项 
      
      input type = “file” ：  上传文件
      input type = “date” ：当前年月日时 间
      input type = “date-local” ：当前年月日--：--
      input type ="number" :举例:电话号码:这里面只能书写数字
      
      textarea   ：文本域
          属性：
              rows ：指定文本域的行数
              cols：指定当前每一行能写多少个字符
        
      input type="hidden" 隐藏域(没有任何效果显示，可以传递数据)
      
      按钮
          input type ="submit" 提交
          input type ="button" 普通按钮,必须指定默认值
          input type ="reset" 重置按钮

方法用例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签</title>
	</head>
	<body>
		<h2>学生个人信息填写</h2>
		<form action="#" method="post">
 			<!--input标签中 必填name属性-->
			姓名：<input type="test" name="username" placeholder="请输入姓名" /><br />
			年龄：<input type="password" placeholder="请输入年龄" /><br />
			学号：<input type="number" name="No." placeholder="请输入学号"/><br />
			民族：<input type="text" name="nation" placeholder="请输入民族" /><br />
			性别：<input type="radio" name="sex" />男
				<input type="radio" name="sex" />女<br />
			籍贯：<select name="jiguan">
				<option value="请选择">请选择</option>
				<option value="陕西">陕西</option>
				<option value="广东">广东</option>
				<option value="广西">广西</option>
				<option value="江苏">江苏</option>
			</select><br />
			出身日期：<input type="datetime-local" name="birth" /><br />
			联系电话:&nbsp;&nbsp;
				<!--type指定的numer:必须提交的时候是数字类型-->
				<input type="number" name="phone" /><br />
			选修课程：<input type="checkbox" />云计算
				<input type="checkbox" />大数据
				<input type="checkbox" />操作系统
				<input type="checkbox" />WEB前端
				<input type="checkbox" />软件测试
				<br />
			上传文件：<input type="file" name="File"/><br />
			个人爱好：<br />
			<textarea name="爱好" rows="5" cols="35"></textarea><br />
			自我介绍：<br />
			<textarea name="jieshao" rows="5" cols="35"></textarea><br />
			
			<!--按钮-->
			<input type="submit" name="tijiao" value="提交" />
			<input type="button" name="anniu" value="普通按钮" />
			<input type="reset" name="chongzhi" value="重置" />
		</form>
	</body>
</html>

结果展示

在这里插入图片描述

对其进行美化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签</title>
	</head>
	<body>
		<h2 align="center">学生个人信息填写</h2>
		<form action="#" method="post">
 			<!--input标签中 必填name属性-->
 			<table border="1px" align="center" bgcolor="aliceblue"
 				width="600px" height="50px">
 				<th colspan="2">学生个人信息</th>
 				<tr>
 					<td>姓名</td>
 					<td><input type="test" name="username" placeholder="请输入姓名" /></td>
 				</tr>
 				<tr>
 					<td>年龄</td>
 					<td><input type="password" placeholder="请输入年龄" /></td>
 				</tr>
 				<tr>
 					<td>民族</td>
 					<td><input type="text" name="nation" placeholder="请输入民族" /></td>
 				</tr>
 				<tr>
 					<td>学号</td>
 					<td><input type="number" name="No." placeholder="请输入学号" /></td>
 				</tr>
 				<tr>
 					<td>性别</td>
 					<td><input type="radio" name="sex" />男
					<input type="radio" name="sex" />女</td>
 				</tr>
 				<tr>
 					<td>籍贯</td>
 					<td>
 						<select name="jiguan">
						<option value="请选择">请选择</option>
						<option value="陕西">陕西</option>
						<option value="广东">广东</option>
						<option value="广西">广西</option>
						<option value="江苏">江苏</option>
						</select>
 					</td>
 				</tr>
 				<tr>
 					<td>出身日期</td>
 					<td><input type="datetime-local" name="birth" /></td>
 				</tr>
 				<tr>
 					<td>联系电话</td>
 					<td><input type="number" name="phone" /></td>
 				</tr>
 				<tr>
 					<td>选修课程</td>
 					<td>
 						<input type="checkbox" />云计算
						<input type="checkbox" />操作系统<br />
						<input type="checkbox" />大数据
						<input type="checkbox" />软件测试
 					</td>
 				</tr>
 				<tr>
 					<td>个人爱好</td>
 					<td><textarea name="爱好" rows="5" cols="35"></textarea></td>
 				</tr>
 				<tr>
 					<td>自我介绍</td>
 					<td><textarea name="jieshao" rows="5" cols="35"></textarea></td>
 				</tr>
 				<tr>
 					<td colspan="2" align="center"><input type="reset" name="chongzhi" value="重置" style="background-color:cadetblue " /></td>
 				</tr>
 				<tr>
 					<td colspan="2" align="center"><input type="submit" name="tijiao" value="提交" style="background-color:aquamarine " /></td>
 				</tr>
 			</table>
		</form>
	</body>
</html>

结果展示

在这里插入图片描述