<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!-- 表单标签 -->
<!-- 在网页中显示收集用户信息的表单效果,登录页,注册页 -->
<!-- input--通过type属性值的不同展示不同的效果 -->
<!-- type属性值 -->
<!-- text--文本框,输入单行文本 -->
<!-- placeholder--占位符,提示用户输入内容的文本 -->
<!-- password--密码框,输入密码 -->
<!-- radio--单选框,多选一 -->
<!-- name--分组,有相同nane属性值的单选框为一组,一组中同时只能有一个被选中 -->
<!-- name属性对于单选框有分组功能 -->
<!-- checked--默认选中 -->
<!-- checkbox--多选框,多选多 -->
<!-- file--文件选择,用于之后上传文件 -->
<!-- multiple--多文件选择 -->
<!-- submit--提交按钮,用于提交数据给后端服务器 -->
<!-- reset--重置按钮,用于重置,恢复表单默认值 -->
<!-- button--普通按钮,默认无功能,之后配合js添加功能 -->
<!-- 实现以上按钮功能,需要配合form标签使用 -->
<!-- form使用方法:用form标签把表单标签一起包裹起来即可 -->
<form action="">
文本框: <input type="text" placeholder="请输入用户名">
<!-- 写什么就显示什么 -->
<br>
<br>
密码框: <input type="password" placeholder="请输入密码">
<!-- 书写的内容变成圆点显示 -->
<br>
<br>
单选框: <input type="radio">男 <input type="radio">女
<!-- 默认状态下,radio并不会实现单选功能 -->
<br>
<br>
性别: <input type="radio" name="gender">男 <input type="radio" name="gender" checked>女
<!-- 性别sex,gender -->
<br>
<br>
多选框: <input type="checkbox" name="" id="" checked>
<br>
<br>
上传文件: <input type="file" multiple>
<br>
<br>
按钮: <input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">
<!-- 属性 xx="xx" -->
<!-- value,给按钮添加显示文字 -->
</form>
<!-- 没有form标签,点击重置没有用 -->
<br>
<br>
<!-- button按钮标签 -->
<!-- 在网页中显示用户点击的按钮 -->
<!-- type属性值
1.submit,提交按钮,用于提交数据给后端服务器
2.reset,重置按钮,用于重置,恢复表单默认值
3.button,普通按钮,默认无功能,之后配合js添加功能 -->
<!-- 谷歌浏览器中button默认是提交按钮
button标签是双标签,更便于包裹其他内容:文字,图片等 -->
<button>按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮,无功能</button>
<br>
<br>
<!-- select下拉菜单 -->
<!-- 在网页中提供多个选项的下拉菜单表单控件 -->
<!-- select标签:下拉菜单的整体
option标签:下拉菜单的每一项 -->
<!-- 常见属性selected--下拉菜单的默认选中
没有selected时,第一个选项是谁就默认是谁-->
<select name="" id="">
<option value="">北京</option>
<option value="" selected>上海</option>
<option value="">云南</option>
<option value="">深圳</option>
</select>
<br>
<br>
<!-- textarea文本域标签 -->
<!-- 在网页中提供可输入多行文本的表单控件 -->
<!-- 常见属性
cols--规定文本域内可见宽度
rows--规定文本域内可见行数 (工作中不用)-->
<!-- 右下角可以拖拽大小
实际开发针对样式效果推荐用CSS设置 -->
<textarea name="" id="" cols="30" rows="1"></textarea>
<br>
<br>
<!-- label标签 -->
<!-- 常用于绑定内容与表单标签的关系 -->
<!-- 使用方法(1)
1.使用label标签把内容包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值 -->
<!-- 使用方法(2)简易
1.直接用label标签把内容和表单标签一起包裹起来
2.把label标签的for属性删除即可 -->
性别:<input type="radio" name="gender" id="nan"> <label for="nan">男</label>
<label ><input type="radio" name="gender">女</label>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
