黑马自学_HTML表单input & 样式表

---------------------- 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" οnchange="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培训、期待与您交流！ ----------------------