手记

第六章 html 常用标签[5]-表单【图文】

老规矩,darker(groge)课前唠唠嗑,感谢慕课网这个平台。
唠唠嗑:表单用于让网站用户填写某些内容,完成之后可以提交到服务器端进行处理保存,html 里面通过一系列的标签来表现出表单的基本界面,表单的美化工作我们留到后面 css 再说!


1. 表单
1)标签定义供用户输入的 HTML 表单:
属性:
action:规定当提交表单时,向何处发送表单数据。
name:给表单命名
target:_blank 等其他值,这是最常用的,其他几乎不用!
method:提交方式,post 或 get 值
可以这样写,
对于上面action,我是向百度发了数据....他接不接收...那就是他的问题了。
name是给表单命名,具体自己可以去w3c里去查,哦对了啊,昨天有人问我w3c是啥,可以去百度一下:w3school。

好了,接下来介绍下面的标签,一定要
2)<input>标签定义表单的输入界面
通过 type 属性来展示不同的输入界面,通过 value 改变默认值
1.普通文本框:

这样我在网页里展示一下它的效果。
整体的代码是这样的:

网页效果是这样的:


2.密码框:

注意和上一个的区别,别混淆。
整体的代码是这样的:

网页效果是这样的:


写到这的时候突然发现我一个错误,就是fom标签没有包住,虽然在html5里可以不包住,也能产生效果,但还是可能有些浏览器出现不兼容的情况,所以,下面的标签我全部补上了form,希望大家见谅,上面我就不换了,毕竟我也是工作累...一个疏忽就出了一点点的错误,希望大家能够将就着点啊。


3.文件上传

整体的代码是这样的:

网页效果是这样的:

可点击,点击出来的效果,我希望大家自己去尝试一下


4.隐藏的 input

整体的代码是这样的:

网页效果是这样的:

说点人话就是啥也没有,文本框被隐藏了。


5.普通按钮

整体的代码是这样的:

网页效果是这样的:


6.单选

通过相同的 name 属性来实现单选

整体的代码是这样的:

网页效果是这样的:


7.复选框

整体的代码是这样的:

网页效果是这样的:


8.提交

整体的代码是这样的:

网页效果是这样的:

9.重置

整体的代码是这样的:

网页效果是这样的:


属性 checked,可用值:checked
一般用于选择输入界面(单选复选),实现默认选择
属性 disabled,可用值:disabled
几乎所有的输入界面都可以使用该属性
属性 name
自己给 input 输入界面起的名字属性 readonly,可用值 readyonly
使输入界面为只读状态
属性 size,值为数字
设置输入框长度
属性 value
该属性值就是这个 input 最终提交到页面的数据,可以通过该属性设置默认值
3)textarea 标签,定义多行输入框
双标签,默认值直接写在标签之间。
属性:cols,值为数字
属性:rows,值为数字
也可以使用上面所说的:disabled,name,readonly 属性
4)label 标签,提升用户体验
标签的 for 属性与相关 input 的 id 属性相同
5)select 标签,配合 option 标签来实现下拉菜单
可用属性:disabled,name,multiple
6)option 标签
可用属性:disabled,selected,value
7)optgroup 标签
把相关的选项组合在一起
属性 label:给选项组命名
属性 disabled:经用该选项组
总结:表单的界面样式等我们学完 css 再来回头构建出漂亮的表单!
以上所有的效果,我做了个总的实战,请看下图,请同学们自己仿照我的代码,进行研究,查看其效果,得出自己的知识。
总实战代码darker(groge):

网页效果

4人推荐
随时随地看视频
慕课网APP

热门评论

我的天,审核好慢啊!!!!!!!

查看全部评论