今日完成内容

1. 1.完成了任务10页面

2. 2.学习了HTMLinput内容，boostrap form内容

3. 明天计划

4. 1.初步学习JS内容

5. 2.学习任务11所需内容

6. 今日学习内容总结

7. Form的HTML/CSS学习

   Form标签

   用途

   form标签中的form元素收集用户的信息输入

   属性

   action="/..page.php"

   设置了form中收集的信息上传目的地

   target

   设置了form信息submit后是否打开新的网页

   • _blank：打开新的页面
   • _self: 在当前页面
   • _self: 在当前页面
   • _parent:
   • _top:
   • name of an iframe

   Method

   用那种方法上传数据

   • GET:上传的data会显示在url里
   • POST：上传的data不会显示在url里

   其他

   • accept-charset
   • enctype
   • novalidate
   • autocomplete
   • novalidate

   Form 标签的元素

   form元素的重要属性

   name&value：name匹配服务器数据库的name，会把对应的value值存储在服务器对应的name里。类似key：value数据 
   注意value值和content基本相同，value是给服务器看的，content的是给用户看的

   • input

     输入内容的表单

     input的属性

     • type:input的类型
     • name/value 数据
     • readonly:只能读，即已经确定的value
     • disable不能用的input
     • size:input的宽度
     • maxlength：input输入内容的最大长度
     • autofocus 页面加载后光标自动移动到当前input
     • placeholder:显示在空白input上描述input
     • required:必须
     • max/mix：给input内容设定范围

     input类型

     • text:文本
     • password 显示圆点的密码
     • email:输入邮箱地址
     • search：输入一个google搜索内容
     • tel：输入一个电话号码
     • url：输入一个网址
     • submit:将当前form中的数据提交指定服务器 
       
     • reset:重设所在form的数据
     • button;t通过onclick属性做一些互动
     • radio：单选框 选择型input所有选项有相同的name，不同的value
     • checkbox:多选框 选择型input所有选项有相同的name，不同的value
     • color：选择一种颜色
     • date：选择一个日期
     • month:选择一年的某个月
     • week：选择一年的第几周
     • datetime-local:选择当前时区的时间
     • time：选择一个时间
     • file：选择一个本地文件
     • number：选择一个日期
     • range：选择一个大概的数字，重点在于数字所在整体范围的区间

   • select>option下拉菜单

     select：定义一个drop-down list；name属性在select设置 option：drop-down list里的选项 value属性在option设置

     select属性

     • size="3" 同时可以看到3个option
     • multiple:可以选择多个option
     • required:必须选择一个选项
     • form=form#ID:option属于哪个form
     • disable

     option属性

     • label:content的简写,使下拉选单的选项较短
     • selected：默认选中
     • disabled:选项不能选择

   • datalist>option

     datalist是一个input和select的结合体，即不仅可以输入内容，也可以在已有选项中选择

     input的list属性必须是datalist的ID名，由此将二者连接，二者同级别

   optgroup

   给option分组 属性有label和disable

   • textarea

     在文本框里输入文字

     重要属性

     rows/cols：文本框显示的列数和行数

   • output

   • fieldset>legend

     fieldset是给form element用边框分组，legend是fieldset的caption对form元素描述

   • label文字与input对应

     label标签for属性必须是对应的input的ID名，点击label光标会自动跳转到对应Input

   form元素的CSS

   • input一般使用属性[type:]选择器
   • input常用;focus伪类选择器用于修改处于输入状态input的样式
   • input默认inline-block
   • input常用背景图片和背景定位来设置输入框的图标
   • input常需要设置宽度高度，内外边距，颜色等常用设置
   form练习

   text password email tel url search submit resetcolor date time      

   任务遇到的难点

8. 1.css模拟radio，想了很久，最后参考网上内容，hide原生的input，用css做一个圆圈在label标签里和input同级别，这样点击input的checked+相邻元素选择器的方法，使圆圈有变化效果

9. 2.CSS模拟button效果，实质是用button做个dropdown效果，主要使用button focus伪选择器，注意button type属性一定要设置button不然focus效果不能持续，button会失去焦点从而使dropdown瞬间又消失。