前端笔记4：表单标签

最新推荐文章于 2024-04-27 09:20:55 发布

惹尘

最新推荐文章于 2024-04-27 09:20:55 发布

阅读量139

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_46037153/article/details/109736438

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.表单元素input
2.select下拉表单元素
3.textarea文本域表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		
		<!-- 表单域form，表单控件（表单元素），提示信息3个部分构成 -->
		<!-- 把表单元素信息交给服务器 -->
		
	<!-- 表单域 -->
		<form action="demo.php"method="post"name="name1">
			<!-- 
			action用于接收并处理表单数据服务器程序的url地址 即把元素值交给哪个页面处理
			method设置表单数据的提交方式，get/post
			name用于指定表单的名称 
			-->
		</form>
	
	
	<!-- 1.表单元素input  input是个单标签 -->
	<form>
		<!-- text文本框，可以输入任何文字 -->
		用户名：<input type="text" />  <br>
		<!-- password 密码框，用户看不见输入的密码 -->
		密码：<input type="password"/><br>
		<!-- radio 单选按钮，可以实现多选一 -->
		性别： 男<input type="radio"/> 女<input type="radio" /><br>
		<!-- checkbox 复选框 可以实现多选效果 -->
		爱好：吃饭<input type="checkbox"/> 睡觉 <input type="checkbox" />打豆豆<input type="checkbox" /><br />

在这里插入图片描述

<!-- 以上性别效果依然多选效果，不是多选一效果 -->
		<!-- =》》》》》》name 是表单名字，这边性别单选必须使用相同的名字name 才能实现多选一 -->
		<!-- value规定input的值，只能在文本框中才能看到效果 -->
		<!-- 
		name，value是每个表单元素都有的属性值，主要是给后台人员使用的
		name是表单元素的名字，要求单选按钮和复选框要有相同的name值 
		-->
		用户名：<input type="text"name="username"value="请输入用户名" />  <br>

		密码：<input type="password"name="pwd" /><br >
	
		性别： 男<input type="radio"name="sex"value="男"/> 女<input type="radio"name="sex" value="女"/><br >
		
		爱好：吃饭<input type="checkbox" name="hobby"/> 睡觉 <input type="checkbox" name="hobby"/>打豆豆<input type="checkbox" name="hobby"/><br />

在这里插入图片描述

<!-- checked -->
		<!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就默认选中这个按钮 -->
		<!-- 单选框只能给一个，多选框可以给多个 -->
		
		性别： 男<input type="radio"name="sex"value="男"checked="checked"/> 女<input type="radio"name="sex" value="女"/><br >
		
		爱好：吃饭<input type="checkbox" name="hobby"checked="checked"/> 睡觉 <input type="checkbox" name="hobby"checked="checked"/>打豆豆<input type="checkbox" name="hobby"checked="checked"/><br />
		<br />

在这里插入图片描述

<!-- maxlength规定输入字段中字符的最大长度 （了解）-->
		用户名：<input type="text"name="username"value="请输入用户名"maxlength="6" /> <br />


		<!-- 点击提交按钮，可以把表单域form里面的表单元素 里面的值 提交给后台服务器 -->
		<input type="submit"value="免费注册" /><br/>
	
	<!-- 重置按钮还原表单元素初始的默认状态 -->
	<input type="reset" value="重新设置" /><br/>
	
	<!-- 普通按钮button 后期结合js搭配使用-->
	<input type="button"value="获取短信验证码" /><br />
	
	<!-- 文件域 使用场景 上次文件使用 -->
		上传头像：<input type="file" >

在这里插入图片描述


	<!-- label标签 --><!-- 比如点中“女”文字，光标就会选择 -->
	<!-- label里面的for属性应当与相关元素的id属性相同 -->
	<label for="text">用户名：</label><input type="text" id="text" /><br />
	
	<input type="radio" id="man" /><label for="man">男</label>
	<input type="radio" id="woman" /><label for="woman">女</label>

在这里插入图片描述

<!-- 2.select下拉表单元素 -->
	籍贯：
	<select>
		<option selected="selected">山东</option><!-- 默认选中项 -->
		<option>陕西</option>
		<option>北京</option>
		<option>上海</option>
		<option>江苏</option>
	</select>
	
		<br/>
		<br/>
		<br/>
	
	<!-- 3.textarea文本域表单元素-->
	<!-- 用户输入内容较多时，不能用文本框了 -->
今日反馈：<textarea cols="50"rows="6">
	
        </textarea>

在这里插入图片描述
总结：

惹尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记4：表单标签

1.表单元素input2.select下拉表单元素3.textarea文本域表单元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body>  <!-- 把表单元素信息交给服
复制链接

扫一扫