发表于: 2018-07-02 15:02:30

5 659


今日完成内容

  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练习               

    任务遇到的难点

  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瞬间又消失。


返回列表 返回列表
评论

    分享到