html 表单的基本使用
今天写一个简单的注册信息的表单，样式如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
form div {
margin: 20px;
}
</style>
</head>
<body>
<!--
上传数据的方式
get 把参数拼接到url的后面 缺点 :1数据全部暴露 不安全 2url长度有限的
post 安全
-->
<!-- action 是数据要提交到的地址 -->
<!--'name:xiaoming
psw:123456
hobby: chi
key:value
'-->
<form action="http://www.baidu.cn" method="post">
<!--name属性 指定上传数据的key的名字-->
<div>
<!--label可以把文字和输入框关联,点击文字输入框就会有焦点 -->
<label for="username">姓名:</label>
<input type="text" name="name" id="username">
</div>
<div>
<label for="psw">密码:</label>
<!--注意type-->
<input type="password" name="password" id="psw">
</div>
<div>
性别:
<!--name值相同 才能单选
value是上传的值
这里用0代表男
1代表女
-->
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
</div>
<div>
爱好:
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="run">跑步
<input type="checkbox" name="hobby" value="swing">游泳
<input type="checkbox" name="hobby" value="study">学习
</div>
<div>
照片:
<input type="file">
</div>
<div>
个人描述
<!--cols初始的时候的列的数量
rows初始的时候的行的数量
-->
<textarea name="desc" id="" cols="30" rows="10">
</textarea>
</div>
<div>
籍贯:
<!--select标签的value值 就是下面选中的option的value值-->
<select name="loc" id="" value=''>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</div>
<div>
<input type="submit" value="注册">
<input type="reset" value="重置">
</div>
</form>
</body>
</html>
一个简单的表单注册提交就这样完成了