简单介绍HTML表单

表单元素如何工作？

<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