<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table、input、select、a -->
<a href="hello.html">跳转页面</a>
<!-- 单独的图片标签,单独显示图片,不会提交到服务器 -->
<img src="./touxiang.png" title="提示信息">
<!-- form表单的作用主要是提交信息到服务器 -->
<form action="hello.html">
<!-- input是行级标签,不会自动换行<br>是换行标签 -->
<!-- input:[t\p\r\c\i] -->
用户名: <input type="text" value="请输入文本"><br><br>
<!-- 中文 英文 -->
密 码:<input type="password" value="123456"><br><br>
单选:
<!-- 多单选项,name这个属性要相同,才可以实现单选 -->
<!-- 单选和多选,后面的文本是显示到界面的值,如果选中,value是值,一般到js会用 -->
<input type="radio" name="radio1" value="M">男
<input type="radio" name="radio1" value="W">女<br><br>
多项:
<input type="checkbox" name="check1" value="1">电子类
<input type="checkbox" name="check2">多项2
<input type="checkbox" name="check3">多项3<br><br>
图片:
<input type="image" src="./touxiang.png" title="提示信息"><br><br>
文件上传:
<input type="file" ><br><br>
普通的按钮:
<input type="button" value="按钮的名称"><br><br>
提交的按钮:
<!-- 按钮submit会提交信息到服务器的地址,form表单中action的属性 -->
<input type="submit" value="提交的按钮">
重置按钮:
<!-- 按钮重置form表单的填写的信息到初始状态 -->
<input type="reset" value="重置按钮">
<!-- 隐藏标签 你是看不到的,比如说,要修改用户信息,但是不想显示用户ID,可以使用隐藏的输入标签
提交到服务器是可以获取隐藏标签的值-->
<input type="hidden" name="">
下拉框:
<select>
<option value="1">选项1</option>
<option value="2" selected="selected">选项2</option>
<option value="3">选项3</option>
</select>
<br><br>
分组选项:
<select>
<optgroup label="一线城市">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</optgroup>
<optgroup label="二线城市">
<option value="">杭州</option>
<option value="">厦门</option>
<option value="">南京</option>
</optgroup>
</select>
<br><br>
多行文本:
<textarea name="" id="" cols="30" rows="10">
比如一些备注信息
</textarea>
</form>
</body>
</html>
学习html5标签的使用2
最新推荐文章于 2022-05-26 09:22:33 发布