html5+css3 |表单的应用

1.创建表单的基本语法格式如下:

     各种表单控件

登录后复制

如下例子:

P212-213nbsp;html>创建表单  用户名:  

  账号:    密码:    

登录后复制

2.input元素的type属性

(1)单行文本输入框

用户名:name;账号:value;证件号:maxlength

立即学习“前端免费学习笔记(深入)”;

(2)密码输入框

(3)单选按钮

(4)复选框

(5)普通按钮

(6)提交按钮

(7)重置按钮

(8)图像形式的提交按钮

(9)隐藏域

(10)文件域

(11)email类型

(12)url类型

(13)tel类型

(14)search类型

(15)color类型

(16)number类型


登录后复制

(17)range类型

(18)Date pickers类型


登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

3.其它元素

(1)list属性


登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

(3)placeholder属性


登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

(4)textarea元素

登录后复制

例子:


登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

(5)select元素

  //  1  2  3

登录后复制

(6)datalist元素


登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

(7)keygen元素


登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制

表单样式

nbsp;html>CSS控制表单样式 body{ font-size:12px; font-family:"宋体";}body,form,input,p{ padding:0; margin:0; border:0;}form{              width:320px;              height:150px;              padding-top:20px;              margin:50px auto;              background:#f5f8fd;              border-radius:20px;              border:3px solid #4faccb;}p{              margin-top:15px;              text-align:center;}p span{              width:40px;              display:inline-block;              text-align:right;}.num,.pass{              width:152px;              height:18px;              border:1px solid #38a1bf;    padding:2px 2px 2px 22px;}.num{               background:url(images/1.jpg) no-repeat 5px center #FFF;               color:#999;}.pass{               background:url(images/2.jpg) no-repeat 5px center #FFF;}.btn01,.btn02{              width:60px;              height:25px;              border-radius:3px;              border:1px solid #6b5d50;              margin-left:30px;}.btn01{ background:#3bb7ea;}.btn02{ background:#fb8c16;} 

登录后复制

以上就是html5+css3 |表单的应用的内容,更多相关内容请关注PHP中文网(www.php.cn)!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3203386.html

(0)
上一篇 2025年4月1日 08:26:25
下一篇 2025年4月1日 08:26:31

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论