第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

第六章 html 常用標(biāo)簽[5]-表單【圖文】

標(biāo)簽:
Html/CSS

老规矩,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):
图片描述
网页效果
图片描述
图片描述

點(diǎn)擊查看更多內(nèi)容
4人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消