黑马自学_HTML表单input & 样式表
2012-03-21 16:09
267 查看
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
<label for="text">点这里</label>
通过for属性和相应的标签绑定。
<input id=“text” type="text" class="size" value="112245555223458" /> 文本框,用于输入文字
<input type="button" value="按钮" /><br />
普通按钮
<input type="checkbox" />运动<br />
复选框
<input type="radio" name="adress" />北京
单选框,必须用name分组
<input type="radio" name="adress" />天津
<input type="radio" name="adress" />上海
<input type="submit" value="登陆" />
提交按钮,配合form表单向服务器提交数据。
<input type="file" /> 选择文件。form表单的属性enctype必须设置为multipart/from-data、method属性为POST
<input type="file" /><input type="image" src="Img/验证码.JPG" /> 图片按钮
<input type="password" /> 密码框
<select id="imprive" size="1"> size值是 1 就是ListBox,否则就是ComboBox。编程的时候通过value来操作
<option value="1">北京</option>
<option>上海</option>
<option>广州</option>
</select>
例子:
CSS (层叠样式表)使用来美化页面用的,可以对页面元素进行更精细的设置。主要有元素内联,页面嵌入,外部引用三种方式。
1,元素内联 直接将元素的样式写入style属性中,<input type="text" style="background-color:#FF00FF" /> 适用于样式没有可复用性的场合
2,页面嵌入 在head中加入
<style type="text/css">
input{background-color:Gray}
</style>
3,外部引用 将css内容写入css后缀文件中,然后在页面中引用,在head中加入<link type="text/css" rel="Stylesheet" href="class/class1.css" />
好处:适用于多个页面共享css。
class文件书写格式:
例子:
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
<label for="text">点这里</label>
通过for属性和相应的标签绑定。
<input id=“text” type="text" class="size" value="112245555223458" /> 文本框,用于输入文字
<input type="button" value="按钮" /><br />
普通按钮
<input type="checkbox" />运动<br />
复选框
<input type="radio" name="adress" />北京
单选框,必须用name分组
<input type="radio" name="adress" />天津
<input type="radio" name="adress" />上海
<input type="submit" value="登陆" />
提交按钮,配合form表单向服务器提交数据。
<input type="file" /> 选择文件。form表单的属性enctype必须设置为multipart/from-data、method属性为POST
<input type="file" /><input type="image" src="Img/验证码.JPG" /> 图片按钮
<input type="password" /> 密码框
<select id="imprive" size="1"> size值是 1 就是ListBox,否则就是ComboBox。编程的时候通过value来操作
<option value="1">北京</option>
<option>上海</option>
<option>广州</option>
</select>
例子:
<script type="text/javascript"> function ccchange(s) { alert(s.value); //当select的选择框放生变化则显示所选象的value值。 } </script> <select id="se" onchange="ccchange(this)"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select>
CSS (层叠样式表)使用来美化页面用的,可以对页面元素进行更精细的设置。主要有元素内联,页面嵌入,外部引用三种方式。
1,元素内联 直接将元素的样式写入style属性中,<input type="text" style="background-color:#FF00FF" /> 适用于样式没有可复用性的场合
2,页面嵌入 在head中加入
<style type="text/css">
input{background-color:Gray}
</style>
3,外部引用 将css内容写入css后缀文件中,然后在页面中引用,在head中加入<link type="text/css" rel="Stylesheet" href="class/class1.css" />
好处:适用于多个页面共享css。
class文件书写格式:
.red{background:red; //class选择器:通过标签元素的class属性调用 height: 67px; } .blue{background:blue} input.size{font-size:larger;color:Green} label.size{font-size:xx-large;color:Maroon} //标签+class选择器:指定标签的class属性来调用 #username{color:Aqua} //id选择器:指定id的标签的class属性来调用 span label{color:Yellow} //关联选择器:只有在span标签中并且是label标签的文本颜色为黄色 h1,h2{color:Gray} //组合选择器:<h1>或<h2>标签内的文本颜色为灰色
例子:
<!--class选择器--> <div class="blue" style="cursor: help; background-image: url('Img/验证码.JPG'); height: 58px;"> nihao</div> <!--标签+class选择器--> <input type="text" class="size" value="112245555223458" /> <label class="size"> 444444<p>777777</label> <!--id选择器--> <textarea id="username" cols="50" rows="7"></textarea> <!--关联选择器--> <input type="button" value="按钮" /><br /> <span> <label> 我的颜色是黄色</label><input type="text" value="我还是黑色没有变" /></span> <!--组合选择器--> <h1> 我的颜色是灰色</h1> <br /> <h2> 我的也是灰色</h2>
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
相关文章推荐
- Java解析DBF文件,错误Failed to parse Number: For input string: "-.---" 或读取不出数据或乱码问题都在这里解决
- Undefined function 'adb' for input arguments of type 'double'.
- DVB-IOPlugin & InputPlugin
- 已知字母序列【d, g, e, c, f, b, o, a】,请实现一个函数针对输入的一组字符串 input[] = {"bed", "dog", "dear", "eye"},按照字母顺序排序并打印
- 当input进行disable后修改input的背景 ---->适用IE浏览器
- 黑马day18 jquery高级特性&Ajax的load方法
- 自学QT之报错undefined reference to vtable for "xxx::xxx"
- asp.net/c# 用<input type="file" />实现文件上传,multipart/form-data
- 黑马day11 不可反复度&解决方式
- 4.Struts的<action input=""></action>:业务逻辑层
- 如何解决异常:java.lang.NumberFormatException: For input string: "null"
- 关于jstl EL用法的注意点(java.lang.NumberFormatException: For input string: "userName")
- Python自学之路第八步——遍历字典&嵌套
- input type="file" 上传文件,若是flv格式,则截取保存一张图片asp.net
- 目标黑马,我的自学之路:第八章 集合框架之Collection
- HTML <input> 标签(附带html5属性)
- 目标黑马,我的自学之路:第十二章 反射以及1.5的部分新特性
- 【知识】HTML 5 <input> placeholder 属性
- <input type="text"> and <html:text> 禁止复制
- 喝酒不骑马的Android自学日记(10)-ProgressBar&&WebView