HTML设计显示表单
表单中的元素很多，常用的有输入框、文本框、单选项、复选项、下拉菜单和按钮等等。
<span style="font-size:24px;"><from method="post">
<p>请输入您的姓名：<br>
<input type="text" name="name" id="name">
</p>
<p>请选择你最喜欢的颜色：<br>
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>请问你的性别：<br>
<input type="radio" name="sex" id="male" value="male">男<br>
<input type="radio" name="sex" id="female" value="female">女</p>
<p>你喜欢做些什么：<br>
<input type="checkbox" name="hobby" id="book" value="book">看书
<input type="checkbox" name="hobby" id="net" value="net">上网
<input type="checkbox" name="hobby" id="sleep" value=""sleep>睡觉</p>
<p>我要留言：<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>
</from></span>使用CSS对表单添加样式风格，包括边框、背景色、宽度和高度等等。
<span style="font-size:24px;">form{
border:1px dotted #AAAAAA;
padding:3px 6px 3px 6px;
margin:0px;
font:14px Arial;
}
input{
color:#00008B;
background-color:#ADD8E6;
border:1px solid #00008B;
}
select{
width:80px;
color:#00008B;
background-color:#add8e6;
border:1px solid #00008b;
}
textarea{
width:200px;
height:40px;
bolor:#00008b;
background-color:#add8e6;
border:1px solid #00008b;
}</span>仔细观察会发现，在IE中单选框和复选框都有边框，但是，在Firefox中却没有。
因此，设计表单时的通常方法还是给具体的各项添加类别属性，进行单独的设置。
<span style="font-size:24px;"><html>
<head>
<title>
表单
</title>
<style>
<!--
form{
border:1px dotted #AAAAAA;
padding:3px 6px 3px 6px;
margin:0px;
font:14px Arial;
}
input{
color:#00008B;
}
input.txt{
border:1px inset #00008b;
background-color:#add8e6;
}
input.btn{
bolor:#00008b;
background-color:#add8e6;
border:1px outset #00008b;
padding:1px 2px 1px 2px;
}
-->
</style>
</head>
<body>
<from method="post">
<p>请输入您的姓名：<br>
<input type="text" name="name" id="name" class="txt">
</p>
<p>请选择你最喜欢的颜色：<br>
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>请问你的性别：<br>
<input type="radio" name="sex" id="male" value="male">男<br>
<input type="radio" name="sex" id="female" value="female">女</p>
<p>你喜欢做些什么：<br>
<input type="checkbox" name="hobby" id="book" value="book">看书
<input type="checkbox" name="hobby" id="net" value="net">上网
<input type="checkbox" name="hobby" id="sleep" value=""sleep>睡觉</p>
<p>我要留言：<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p>
</from>
</body>
</html></span>进行单独的CSS设置之后，两个浏览器的显示效果基本一致了，这种设计方法在实际设计中经常使用。
注意：各个浏览器之间的显示差异，通常是因为浏览器对CSS属性的默认值不同导致，因此，解决方法就是指定该值，而不让浏览器使用默认值。
1999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
