发表于: 2018-07-02 15:02:30
5 657
今日完成内容
1.完成了任务10页面
2.学习了HTMLinput内容,boostrap form内容
明天计划
1.初步学习JS内容
2.学习任务11所需内容
今日学习内容总结
Form的HTML/CSS学习
- 用途
- 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 标签的元素
- input一般使用属性[type:]选择器
- input常用;focus伪类选择器用于修改处于输入状态input的样式
- input默认inline-block
- input常用背景图片和背景定位来设置输入框的图标
- input常需要设置宽度高度,内外边距,颜色等常用设置
form元素的CSS
任务遇到的难点
1.css模拟radio,想了很久,最后参考网上内容,hide原生的input,用css做一个圆圈在label标签里和input同级别,这样点击input的checked+相邻元素选择器的方法,使圆圈有变化效果
2.CSS模拟button效果,实质是用button做个dropdown效果,主要使用button focus伪选择器,注意button type属性一定要设置button不然focus效果不能持续,button会失去焦点从而使dropdown瞬间又消失。
评论