三沣开发知识 购物 网址 小说 美女秀 游戏 电影下载 图说天下 生肖星座 新闻 笑话 | IT开发 软件下载 手机论坛 三沣软件 360图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> HTML表单相关 -> 正文阅读
 

[Html-Css]HTML表单相关

HTML表单相关 表单:
<input type="text" name="" value="" size="显示字符数" maxlength="最多字符数" readonly="readonly只读" disabled="disabled"不可操作未激活 placeholder="Search W3School">
<input type="password" value="" size="">
<input type="radio" name="sex" value="男" checked="checked" id="man"><label for="man">男</label>&nbsp;
<input type="radio" name="sex" value="女" id="woman"><label form="woamn">女</label>...........name需要相同!!!!!!!
<select name="">
<option selected="" value=""></option>
<option value=""></option>
</select>
<optgroup label="">分组名称
<select name="" size="能够显示的行数" multipule="multiple"多选>
<option value=""></option>
</select>
</optgroup>
<input type="file" size="显示长度" name="">
表单外框
<fieldset></fieldset>
<lenged></lenged>为fieleset定义标题
<input type="reset|submit|button" name="" value="">
<input type="image" src="" name>
<input type="hidden" value="" name="">
<textarea name="" cols="每行几个字" rows="多少行"></textarea>
添加滚动条: <textarea style=“scrollbar:overflow” ></textarea>
水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">
2.设定多行文本框的滚动条
没有水平滚动条
< textarea style="overflow-x:hidden">< /textarea>
没有垂直滚动条
< textarea style="overflow-y:hidden">< /textarea>
没有滚动条
< textarea style="overflow-x:hidden;overflow-y:hidden">< /textarea>
或< textarea style="overflow:hidden">< /textarea>
3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在样式表文件中定义好一个类,调用样式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样调用:
< textarea class="coolscrollbar">< /textarea>
textarea颜色及边框设置:
< textarea style="border:red solid;border-width:1 1 1 1;color:#CCCCCC;">< /textarea>
overflow-x,overflow-y的可取值为:visible(默认取值),hidden,auto,scroll。
visible:始终不显示滚动条,文本区域的大小会根据内容的增加,自动增长,以显示全部内容。
scroll:不管文本区域里的内容有多少,始终显示滚动条。
hidden:始终不显示滚动条,内容超出层面的对象是不显示。
auto:如果内容在文本区域内可以全部显示,滚动条不显示,当内容无法全部显示时,内容被截断,加上滚动条显示
所有内容。
注】:style的overflow属性必须和width属性结合使用才能生效!

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>注册</title>
  6 </head>
  7 <body>
  8 <table width="700" align="center">
  9 <tr>
 10 <td>
 11 <form action="" name="" method="post">
 12 <fieldset>
 13 <legend>注册</legend>
 14 <table border="1" cellpadding="10" cellspacing="1" width="600" align="center">
 15 <colgroup bgcolor="green" span="1" align="center"></colgroup>
 16 <colgroup bgcolor="yellow" align="center"></colgroup>
 17 <tr>
 18 <td>用户名:</td>
 19 <td><input type="text" name="uesrname" value="" placeholder="用户名为中文" size="10" maxlength="15"></td>
 20 </tr>
 21 <tr>
 22 <td>密码</td>
 23 <td ><input type="password" namw="pwd1"></td>
 24 </tr>
 25 <tr>
 26 <td>确认密码</td>
 27 <td ><input type="password" name="pwd2"></td>
 28 </tr>
 29 <tr>
 30 <td>年龄</td>
 31 <td><input type="text" name="age" value="25"></td>
 32 </tr>
 33 <tr>
 34 <td>性别</td>
 35 <td>
 36 <fieldset>
 37 <legend>请选择性别</legend>
 38 <input type="radio" name="sex" value="男" checked="checked" id="man"><label for="man"></label>&nbsp;
 39 <input type="radio" name="sex" value="女" id="woman"><label form="woamn"></label>
 40 </fieldset>
 41 </td>
 42 </tr>
 43 <tr>
 44 <td>城市</td>
 45 <td>
 46 <select name="citys">
 47 <option value="北京" checked="checked">北京</option>
 48 <option value="上海">上海</option>
 49 <option value="常州" >江苏</option>
 50 </select>
 51 </td>
 52 </tr>
 53 <tr>
 54 <td>城市中的地区</td>
 55 <td>
 56 <select name="citys">
 57 <optgroup label="常州">
 58 <option value="武进区">武进区</option>
 59 <option value="钟楼区">钟楼区</option>
 60 <option value="新北区">新北区</option>
 61 <option value="天宁区">天宁区</option>
 62 </optgroup>
 63 <optgroup label="上海">
 64 <option value="武进区">武进区</option>
 65 <option value="钟楼区">钟楼区</option>
 66 <option value="新北区">新北区</option>
 67 <option value="天宁区">天宁区</option>
 68 </optgroup>
 69 </select>
 70 </td>
 71 </tr>
 72 <tr>
 73 <td>交友目的</td>
 74 <td>
 75 <select name="target" size="3" multiple="multiple">
 76 <option value="">普通朋友</option>
 77 <option value="">对象</option>
 78 <option value="">一般朋友</option>
 79 </select>
 80 </td>
 81 </tr>
 82 <tr>
 83 <td>爱好</td>
 84 <td>
 85 <input type="checkbox" name="hobby" value="" id="yisu"><label form="yisu">艺术</label>
 86 <input type="checkbox" name="hobby" value="" id="yinyue"><label form="yinyue">音乐</label>
 87 <input type="checkbox" name="hobby" value="" id="yinyue">唱歌
 88 </td>
 89 </tr>
 90 <tr>
 91 <td>图片上传</td>
 92 <td>
 93 <input type="file" name="">
 94 </td>
 95 </tr>
 96 <tr>
 97 <td>自我介绍</td>
 98 <td>
 99 <textarea name="" rows="6" cols="15"></textarea>
100 </td>
101 </tr>
102 <tr>
103 <td><input type="hidden" name=""></td>
104 </tr>
105 <tr>
106 <td colspan="2" bgcolor="white">
107 <input type="submit" value="注册" name="">
108 <input type="reset" name="" value="重置">
109 <input type="button" name="" value="普通按钮">
110 </td>
111 </tr>
112 </table>
113 </fieldset>
114 </form>
115 </td>
116 </tr>
117 </table>
118 </body>
119 </html>


  Html-Css 最新文章
Bootstrap表格
line
Vuex2.0边学边记+两个小例子
微信场景制作教程
2017年前端框架、类库、工具大比拼
react与vue
今日例子border
自适应网页设计(ResponsiveWebDesign)
CSS兼容各浏览器的hack
我的第一个HTML的程序
上一篇文章      下一篇文章      查看所有文章
加:2017-06-18 22:06:18  更:2017-06-18 22:06:22 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频
2017-6-24 23:34:03
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库