常用表单元素

来源:互联网 发布:java研发工程师南昌 编辑:程序博客网 时间:2024/06/05 15:05
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<style type="text/css">
div{
width: 500px;
height: 500px;
margin: 0 auto;
background-color: gray;
margin-top: 50px;

}
</style>
</head>
<body>
<div>
<center>
<!-- 表单 
action:后台地址
method:请求方式 get/post
post 请求更安全-->
<form action="http://www.baidu.com" method="post">
<br>
<br>
<br>
<span>用户名:</span>
<!-- 后台通过name 作为key 取得你传递的val -->
<!-- 文本输入框 -->
<input type="text" name="" value="admin" style="color: red"><br>
<span>密&emsp;码:</span>
<!-- 密码输入框 -->
<input type="password" name="" value="password"><br>
<!-- 单选框 
name值必须相同-->
<span>男</span>
<input type="radio" name="sex">
<span>女</span>
<input type="radio" name="sex">
<br>
<!-- 下拉选择框 -->
<p>选择你的年龄:</p>
<select>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
</select>
<br>
<!-- 复选框 -->
<p>兴趣爱好:</p>
<span>读书</span><input type="checkbox" name="">
<span>听音乐</span><input type="checkbox" name="">
<span>下棋</span><input type="checkbox" name="">
<span>散步</span><input type="checkbox" name="">
<br>
<!-- 文本域 -->
<p>描述:</p>
<textarea></textarea>
<!-- 文件上传 -->
<p>上传照片</p>
<input type="file" name="">
<br>
<!-- 提交按钮 -->
<input type="submit" name="">
<!-- 重置按钮 -->
<input type="reset" name="">
<!-- 自定义按钮 -->
<br>
<input type="button" name="" value="null">
</form>
</center>
</div>
</body>
</html>