表单元素学习笔记

表单
form表单：提交数据到服务器

    action表示提交服务器的地址，跳转页面
    method提交数据方式  
    get与post区别
    1.get请求参数显示在地址栏，
    post会将数据封装到formData
    2.get请求安全性没有post高，相对于post
    3.get请求参数有长度限制，post没有


表单项
type: 表单项的类型 
    text ：文本
    email:邮箱
    password:密码框
    date:日期选择框
    month:月份
    submit:提交按钮
    reset:重置按钮
    button:普通按钮
    color：颜色选择器
    radio:单选框
    checkbox:复选框
    number:数字选择框

在表单中有表单元素：文本域，单选框，复选框，按钮，列表等。

如何向表单添加元素呢，用以下标签：

   <input> 表单输入标签

   <select> 菜单和列表标签

   <option> 菜单和列表项目标签

   <textarea> 文字域标签

   <optgroup> 菜单和列表项目分组标签

input语法如下：

<input type=“类型属性” name=“名称” …/>
Type属性值 text password file checkbox radio Button Submit
描述 文字域 密码域 文件域 复选域 单选域 按钮 提交按钮
常用表单元素：
input
placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
把文本输入字段设置为必填项，添加属性required

<input type="text" placeholder="图片地址" required>

button 提交按钮：

<button type="submit">this button submits the form</button>

radio 单选
每一个单选按钮都应该嵌套在它自己的label（标签）元素中。
所有关联的单选按钮应该拥有相同的name属性。
for属性和单选按钮id属性值相等，这样label元素和它的子元素单选按钮之间创建了一种链接关系。
添加checked属性，默认选中项

<label for="indoor">   
    <input id="indoor" type="radio" name="indoor-outdoor" checked>Indoor 
</label>

checkbox 复选
同radio

<label for="loving">
    <input id="loving" type="checkbox" name="personality" checked> Loving
</label>

<form action="/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">室内</label>
    <label for="outdoor"><input  id="outdoor" type="radio" name="indoor-outdoor">室外</label><br>
    <label for="loving"><input  id="loving" type="checkbox" name="personality">忠诚</label>
    <label for="loving"><input  id="loving"t type="checkbox" name="personality">懒惰</label>
    <label for="loving"><input  id="loving" type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
</form>