<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- form标记这是一个表单区域 -->
<form action="">
<!-- 表单语法 input type="?" -->
<!-- text文本 passwo密码框 radio单选栏 checkbox多选框 file上传文件-->
<!-- placeholder提示文本 -->
文本框<input type="text" placeholder="请输入文字">
<br><br>
密码框<input type="password" placeholder="请输入密码">
<br><br>
单选栏<input type="radio">
<br><br>
多选框<input type="checkbox">
<br><br>
上传文件<input type="file">
<br><br>
<!-- 单选框和多选框如果想分成一组 添加一个name属性 一样的名字就可分为一组 单选框里一组里的内容只能选一个 -->
<!-- checked属性 默认选择值 -->
<!-- 如果想增大点击的范围增加用户体验需要用到label标签 是他点到文字也可以选中单选框-->
性别:
<input type="radio" name="gender" checked>男
<!-- label标签方式一 input.id = label.for -->
<input type="radio" name="gender" id = "woman"><label for="woman">女</label>
<!-- label标签方式二 直接包裹住整个选项 -->
<label><input type="radio" name="gender">沃尔玛购物袋</label>
<br><br>
<!-- 加上multiple属性可以实现多文件上传 -->
上传文件<input type="file" multiple>
<br><br>
<!-- 多选框可以添加多个默认选中 -->
您的兴趣爱好:
<input type="checkbox" name="like" checked> 打篮球
<input type="checkbox" name="like" checked> 敲代码
<input type="checkbox" name="like" checked> 打游戏
<input type="checkbox" name="like"> 学习
<br><br>
<!-- 下拉列表 select=>option -->
您的所在地:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
<br><br>
<!-- 文本域 textarea 可以换行和改变大小的文本框 -->
<textarea placeholder="请输入文字"> </textarea>
<br><br>
<!-- submit提交属性 把数据提交到后台 -->
<button type="submit">提交按钮</button>
<!-- 重置所有的数据 改为默认值-->
<button type="reset">重置按钮</button>
<!-- 普通的按钮需要和js配合使用 -->
<button type="button">普通按钮</button>
<br><br>
<!-- 布局标签div 和 span -->
<!-- div 是独占一行的 文字后会换行 -->
<div>这是一个div标签</div>
<div>这是一个div标签</div>
<!-- span是不换行的 -->
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<!-- 如果想打出空格得用  < < >> -->
<br>
这是 <p>
</form>
</body>
</html>
HTML5表单标签
最新推荐文章于 2024-07-17 16:29:37 发布