网页制作HTML入门笔记第三章
一天一个进步小技巧
- 表单
- 表单的构成
- 表单的语法
- name属性
- action属性
- method属性(get/post)
- 表单元素 input
- 密码框.password
- 日期选择框.date
- 搜索框.search
- 滑块.range
- 颜色选择.color
- 数字输入框.number
- 单选框.radio
- (多选框)复选框.checkbox
- 选中文件.file
- 利用input制作按钮
- 添加背景的按钮
- 下拉列表.select
- 下拉列表分组
- 文本域,多行文本框.textarea
- 按钮元素.button
- 添加背景的按钮
- 配合表单元素使用的其他元素
- label
- 数据列表.datalist
- form元素
- fieldset元素
- 表单状态
- html进阶内容
- iframe元素
- iframe 是可替换元素
- 如何关联窗口
- 链接别人的网站
- 在页面中使用flash
- object元素
- 子元素 param(参数)
- embed元素
表单
表单的构成
1 2 3 4 | 在HTML中，一个完整的表单通常由表单控件（也称为表单元素），提示信息和表单域3个部分构成 表单域（容纳表单控件和提示信息） 表单控件（包括单行文本输入框，密码输入框，提交按钮等） |
表单的语法
通常，会将真个表单元素，防止在form元素的内部，作用是当提交表单时，会讲form元素内部的表单内容以合适的方式提交到服务器。
form元素对开发静态页面没有什么意义
1 2 3 4 5 |
name属性
用于设置标识表单的名称
action属性
用于设置处理表带提交数据的URL
1 |
当用户填写完表单后，点击“提交”按钮，浏览器将表单信息提交至当前系统中的服务器，服务器完成对提交信息的处理工作
method属性(get/post)
用于定义浏览器表单中的信息提交给服务器端的方式
1 2 3 | 安全性：使用get方式传递数据有长度限制，使用post方式提交的数据显示在地址栏上 提交数据的长度：使用get方式提交的数据有长度显示，使用post方式提交的数据没有长度限制，所以当使用表单提交的数据比较大，建议使用post方式 |
表单元素 input
文本输入，输入框
空元素，不是块级元素，不能自动换行
1 2 3 4 5 6 7 | 常见的表单元素包括文本框，按钮和下拉列表等，除下拉列表框，多行文本域等少数表单元素外，大多数表单元素均使用标签，只是他们的属性设置不同 type属性:输入框的类型 value属性:输入框的值(内容默认的值，会显示在框内) placeholder属性:显示提示的文本，文本框没有内容时显示 |
type取值
1 2 3 | type:text 普通文本输入框 type:password 密码输入框 type:date 日期选择框 |
密码框.password
1 |
日期选择框.date
会有兼容性问题，调用操作系统的日期，无法更改样式
1 |
搜索框.search
会有兼容性问题，手机端用的比较多
1 |
滑块.range
会有兼容性问题
1 | 可以设置最大最小值 |
颜色选择.color
会调用操作系统的颜色选择器，无法更改样式
1 |
数字输入框.number
会有兼容性问题
1 2 3 | 可以设置最大最小值 step=" "可以设置上下步进的数字个数 |
单选框.radio
1 |
在开发中需要区分开哪些单选框是一组，所以要给单选框加入name属性，从而实现多个按钮选一个
1 2 3 4 5 | checked:默认选中的,布尔属性 同name属性值的单选按钮，若都有checked="checked",则以最后一个单选按钮为准选中 name命令规则类似C语言标识符命名规则 |
(多选框)复选框.checkbox
1 2 3 | name 因为在开发中可能会有多个多选框，要从逻辑上区分开，所以必须要设置name属性 |
选中文件.file
1 |
更多的input属性，可以到MDN查询input属性
利用input制作按钮
1 2 3 4 | reset:重置按钮 //把一个区域所有东西还原到最初状态,可以通过value更改按钮文字 submit:提交按钮 //可以通过value更改按钮文字 buttom:普通按钮 //普通按钮是没有默认文本,通过value来设置文字 |
添加背景的按钮
? input制作的按钮代码书写
1 |
下拉列表.select
通常和option元素配合使用，value内的值用于上传服务器的信息
1 2 3 4 5 6 7 8 9 10 11 | selected=“selected”：默认选择,布尔属性 行数：列表默认显示出来的行数 |
下拉列表分组
1 2 3 4 5 6 7 8 9 10 11 12 13 | 利用optgrounp来实现分组选择，label来设置分组的组名，组名是无法被选中的 |
下拉列表选择多个
1 2 3 4 5 6 7 8 9 10 11 12 13 | 在select标签 加入multiple属性即可，按住ctrl键就可以完成多选 |
文本域,多行文本框.textarea
可替换元素
1 2 3 4 5 6 7 8 9 10 11 | cols:横向上有多少字符 rows:有多少行 要做文本框内显示默认内容，写在文本域的内容的部分，不会发生空白折叠 通常会使用placeholder属性来填写默认内容 在超出文本框后会出现滚动条 |
按钮元素.button
默认值为submit
1 2 3 4 5 | reset:重置按钮 submit:提交按钮 buttom:普通按钮 |
添加背景的按钮
? 用button实现，代码如下
1 2 3 |
配合表单元素使用的其他元素
label
普通元素，通常配合单选和多选框使用
一个普通的单选按钮
1 2 3 4 | 男 女 |
需求：点击文本男，女的时候也会被选中
显式关联
label标签内的 for的取值为需要链接的表单元素的值，给表单元素设定一个id值，即可实现需求
利用for属性，吧label余input标签关联在一起
1 2 3 4 5 |
隐式关联
? 直接使用label元素作为input的父元素，即可实现需求
1 2 3 4 5 6 7 8 9 |
数据列表.datalist
子元素option
该元素本身不会显示到页面，通常用于和普通文本框配合使用
一个普通的文本域
1 |
需求:在文本域内输入，会有提示功能
1 2 3 4 5 6 7 8 9 10 |
form元素
在开头的表单的语法有详细
fieldset元素
表单分组
子元素为legend
1 2 3 | 会生成在边框上 |
假如有n个表单元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 账号: 密码: |
需求：表单元素过多无法区分，需要分组
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
利用fieldset元素把需要分组的表单元素框选，就会形成一个边框包裹住两个表单元素
表单状态
readonly属性:布尔属性，只读，不会改变表单显示样式
1 | 文本框内的值无法被修改 |
disabled属性:布尔属性，是否禁用，会改变表单显示样式
1 | 文本框无法被使用 |
html进阶内容
iframe元素
框架页
通常用于在网页中嵌入另一个页面
1 2 3 | <iframex src="//i2.wp.com/www.baidu.com" frameborder="边框宽度"></iframex> <iframex src="网页地址" frameborder="边框宽度"></iframex> |
iframe 是可替换元素
- 通常是行盒
- 通常显示的内容取决于元素的属性
- css不能完全控制其中的样式，例如图片的颜色
- 具有行块盒的特点
超链接默认点开会在当前窗口打开
如何关联窗口
第一步
第二步
1 2 | 创建iframe元素, 给iframe设置一个name <iframex name="myframe"></iframex> |
第三步
链接别人的网站
可用于链接别人网站的视频，放在自己的网页中。
可能会用到的html标签
1 2 3 4 | scrolling 如果网页超过这个区域的宽高，是否设置滚动条 framborder 是否有边框 framespacing 框架页和其他元素是否有空隙 allowfullscreen 是否允许全屏,bool值（true(真)或false(假)） |
在页面中使用flash
他们都是可替换元素
object元素
1 2 3 4 5 6 7 | data 资源地址 type 表示嵌入的元素是什么类型 MIME:多用途互联网邮件类型 例如，资源是jpg图片，MIME:image/jpeg 在MIME中查找你要嵌入的元素类型 |
子元素 param(参数)
1 2 3 | 告诉别人一些其他的信息,例如：name="quality" value="high"，图像质量为高，不会显示 |
embed元素
1 2 3 4 5 6 7 | src 资源地址 type 表示嵌入的元素是什么类型 MIME:多用途互联网邮件类型 例如，资源是jpg图片，MIME:image/jpeg 在MIME中查找你要嵌入的元素类型 |
应用
1 2 3 4 5 6 | 比较兼容的写法，如果object可以识别就会无视embed，如果object无法识别就执行embed |
