表单元素如何工作？
<form action="/abc" method="get">
</form>
action 说明了将表单表单发往何处。
method 说明了浏览器发送数据的方式，一般是get和post方式,post把表单变量打包隐藏给后台发送给服务器；get也是把表单变量打包，不过在它发送请求之前附加在url的末端部分。
在表单里可以添加什么？
<div class="username">
<label for="username">姓名：</label>
<input type="text" id="username" placeholder="用户名" name="username">
</div>
text 类型的文本输入框。placeholder属性起文本提示作用
<div class="password">
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</div>
password 类型的文本输入框
<div class="sex">
<label>性别：</label>
<input type="radio" name='sex' value="男" checked="checked" >男
<input type="radio" name="sex" value="女">女
</div>
输入单选框
<div class="hobby">
<label>爱好：</label>
<input type="checkbox" name="hobby" value="data">data
<input type="checkbox" name="hobby" value="旅游" checked="checked">旅游
<input type="checkbox" name="hobby" value="宠物" checked="checked">宠物
</div>
输入复选框， 其中checked="checked" 页面呈现时为选中状态
<div class="textarea">
<label>评论：</label>
<textarea name="contents"cols="30" rows="10">
ddd
</textarea>
长文本输入框
<div class="mycar">
<label>我的car</label>
<select name="mycar">
<option value="宝马">宝马</option>
<option value="奔驰">奔驰</option>
<option value="萨博" selected>萨博</option>
</select>
</div>
选项列表
<input type="submit" value="提交">
submit 提交按钮
最后展示效果
展示效果.png
其他
<input type="file" accept="image/png">
上传文件 accept 这个确定了上传的文件的属性，比如这里的png格式图片
<input type="button"> 可点击但不会提交表单
<input type="reset"> 重置表单
表单中每个输入控件都有一个name属性:它在表单和处理表单的Web应用 程序之间建立连接。
自己按照上述步骤写一个form表单，，以get方式请求。点击提交按钮。
看浏览器上的url。
url.png
其实这是键值的方式。即key = value 而服务器收到的就是
username= 自己填写的用户名
password= 自己填写的密码
sex= 男
sex1= 女
hobby= 旅游
等等，，如果仔细观察就会发现，key实际上就是name，由此可知，表单里name属性绝对不能不写，不写就是白写了。
