CSS表单问题

html-css056

CSS表单问题,第1张

那是因为你没有给你那个蓝色的层添加高度在<style type="text/css">

#formwrapper{

width:812px

height:25px

line-height:19px

background:#3ea8d2

}

.input{

border:1px solid #666699

height:17px

}

</style>

添加上height:25px就行了

<style>

.box1 input, .box1 label {float:leftheight:20pxline-height:20px}

.box1 label {margin-right:16px}

</style>

1. 在HTML的大部分元素中,标签都是用尖括号括起来的第一个,所以以你的代码为例:

<input type="checkbox" name="chiwhat" id="chiwhat" value="huanggua">黄瓜<br>

input  是标签  br 是标签,input 后面的  type name id value 都是属性,属性后是“=”,

等号后是“ ”,双引号里面的叫属性值。

2. id 就是身份证属性,就像人的身份证号码一样,id=“.... ” 这个属性值必须是唯一的。为什么要个id属性和值,因为HTML有很多元素,例如你的代码,一次出现三个 input ,那么怎么区分它们呢?就是用id属性和值了,你有三个 input 就相当于有三个人都叫 张三,如果第一个张三有个唯一的身份证号码 12345,第二个张三有个唯一的身份证号码 12346,第三个张三有个唯一的身份证号码12347.那么我说:找12346. 那么找的就是第二个张三。三个input都有id属性和值,那么就能找到对应的 input而不是其它的input。找到对应唯一的input,就能对这个input进行修改:在CSS中改变颜色,大小,位置等等,也能在javascript中对这个input进行其他操作。

如果HTML中多个标签的id属性的值都是相同的,那么会把id当成class对待,CSS中选择器会一次选择多个元素,然后对它们都修改。

因为id属性和值是唯一的,所以你的代码三个id都一样,那是错误的写法。正确的写法是:

<p>

<input type="checkbox" name="chiwhat" id="chiwhat1" value="huanggua">黄瓜<br>

<input type="checkbox" name="chiwhat" id="chiwhat2" value="egg">鸡蛋<br>

<input type="checkbox" name="chiwhat" id="chiwhat3" value="miantiao">面条<br>

</p>

以上代码的<br>是百度没有显示出来,不是删除了。

3. name代表的input的名字,用name这个属性和值目的是:一次找到都叫这个名字的input。相当于一大群人中,有三个人叫 张三,5个人叫 李四,2个人叫王五。我叫:张三出来。 那么就能够一次叫出三个人,这三个人都叫张三。你的代码中有三个input的 name="chiwhat" ,那么在javascript中,用这个name="chiwhat",就能一次对这三个名叫 chiwhat 的input进行操作。用name="chiwhat" 主要是为了在javascript中操作方便。

在CSS中一般用class来代替,那就能一次对多个元素进行修改。javascript中也能使用class,但是有些浏览器不兼容,所以要用class就需要写更多的代码,用name属性更容易。