zoukankan      html  css  js  c++  java

  • HTML与CSS（图解5）：表单

    表单元素：

    <html>
<head>
<title>表单</title>
<style>
<!--
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;
    color: #00008B;
    background-color: #ADD8E6;
    border: 1px solid #00008B;
}
-->
</style>
   </head>
<body>
<form 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><!--提交按钮-->
</form>
</body>
</html>

    像文字一样的提交按钮： 

    <html>
<head>
<title>像文字一样的按钮</title>
<style>
<!--
body{
    background-color:#daeeff;            /* 页面背景色 */
}
form{
    margin:0px; padding:0px;
    font:14px;
}
input{
    font:14px Arial;
}
.txt{
    border-bottom:1px solid #005aa7;    /* 下划线效果 */
    color:#005aa7;
    border-top:0px; 
    border-left:0px;
    border-right:0px;
    background-color:transparent;        /* 背景色透明 */
}
.btn{
    background-color:transparent;        /* 背景色透明 */
    border:0px;                            /* 边框取消 */
}
-->
</style>
   </head>
<body>
<form method="post">
    请输入您的信息: <input type="text" name="name" id="name" class="txt">
    <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
</form>
</body>
</html>

     表单中添加表格： 

    <html>
<head>
<title>直接输入的Excel表格</title>
<style>
<!--
table.formdata{
    border:1px solid #5F6F7E;
    border-collapse:collapse;
    font-family:Arial;
}
table.formdata caption{
    text-align:left;
    padding-bottom:6px;
}
table.formdata th{
    border:1px solid #5F6F7E;
    background-color:#E2E2E2;
    color:#000000px;
    text-align:left;
    font-weight:normal;
    padding:2px 8px 2px 6px;
    margin:0px;
}
table.formdata td{
    margin:0px;
    padding:0px;
    border:1px solid #ABABAB;    /* 单元格边框 */
}
table.formdata input{
    width:100px;
    padding:1px 3px 1px 3px;
    margin:0px;
    border:none;                /* 输入框不要边框 */
    font-family:Arial;
}
.btn{
    border:1px solid #0083f2;
    font-family:Arial;
}
-->
</style>
   </head>
<body>
<form method="post">
<table class="formdata">
<caption>公司销售统计表 2004～2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">硬盘(Hard Disk)</th>
    <td><input type="text" name="harddisk2004" id="harddisk2004"></td>
    <td><input type="text" name="harddisk2005" id="harddisk2005"></td>
    <td><input type="text" name="harddisk2006" id="harddisk2006"></td>
    <td><input type="text" name="harddisk2007" id="harddisk2007"></td>
</tr>
<tr>
    <th scope="row">主板(Mainboard)</th>
    <td><input type="text" name="mainboard2004" id="mainboard2004"></td>
    <td><input type="text" name="mainboard2005" id="mainboard2005"></td>
    <td><input type="text" name="mainboard2006" id="mainboard2006"></td>
    <td><input type="text" name="mainboard2007" id="mainboard2007"></td>
</tr>
<tr>
    <th scope="row">内存条(Memory Disk)</th>
    <td><input type="text" name="memory2004" id="memory2004"></td>
    <td><input type="text" name="memory2005" id="memory2005"></td>
    <td><input type="text" name="memory2006" id="memory2006"></td>
    <td><input type="text" name="memory2007" id="memory2007"></td>
</tr>
<tr>
    <th scope="row">机箱(Case)</th>
    <td><input type="text" name="case2004" id="case2004"></td>
    <td><input type="text" name="case2005" id="case2005"></td>
    <td><input type="text" name="case2006" id="case2006"></td>
    <td><input type="text" name="case2007" id="case2007"></td>
</tr>
<tr>
<th scope="row">电源(Power)</th>
    <td><input type="text" name="power2004" id="power2004"></td>
    <td><input type="text" name="power2005" id="power2005"></td>
    <td><input type="text" name="power2006" id="power2006"></td>
    <td><input type="text" name="power2007" id="power2007"></td>
</tr>
<tr>
    <th scope="row">CPU风扇(CPU Fan)</th>
    <td><input type="text" name="cpufan2004" id="cpufan2004"></td>
    <td><input type="text" name="cpufan2005" id="cpufan2005"></td>
    <td><input type="text" name="cpufan2006" id="cpufan2006"></td>
    <td><input type="text" name="cpufan2007" id="cpufan2007"></td>
</tr>
<tr>
<th scope="row">总计(Total)</th>
    <td><input type="text" name="total2004" id="total2004"></td>
    <td><input type="text" name="total2005" id="total2005"></td>
    <td><input type="text" name="total2006" id="total2006"></td>
    <td><input type="text" name="total2007" id="total2007"></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value="Reset All" class="btn"></p>
</form>
</body>
</html>

    表格中添加表单：

    <html>
<head>
<title>Sina调查问卷</title>
<style>
<!--
table.outside{                    /* 外层表格 */
    background:url(bg1.jpg);
    font-size:12px;
    padding:0px;
}

td.title{                        /* 表格标题 */
    color:#FFFFFF;
    font-weight:bold;
    text-align:center;
    padding-top:3px;
    padding-bottom:0px;
}
td.tdoutside{
    padding:0px 1px 4px 1px;
}
table.inside{                    /* 内层表格 */
    width:269px;
    font-size:12px;
    padding:0px;
    margin:0px;
}
td.tdinside{
    padding:7px 0px 7px 10px;
    background-color:#FFD455;
}
form{
    margin:0px; padding:0px;
}
input{
    font-size:12px;
}
a{
    color:#000000;
    text-decoration:underline;
}
-->
</style>
   </head>
<body>
<table class="outside">
    <tr><td class="title">热点调查</td></tr>
    <tr><td class="tdoutside">
        <form method="post">
        <table class="inside" cellspacing="0"> 
            <tr>
                <td class="tdinside">
                在姚明缺阵麦蒂领军的情况下，火箭队的胜率是<br>
                <input type="radio" name="q_498" value="2749">超过60％<br>
                <input type="radio" name="q_498" value="2750">50％到60％<br>
                <input type="radio" name="q_498" value="2751">40％到50％<br>
                <input type="radio" name="q_498" value="2752">40％到50％
                <input type="radio" name="q_498" value="2753">30％以下<br>
                <input type="submit" value="提交">
                <input type="button" name="viewresult" value="查看"> <a href="#">新浪-篮球先锋报联合评选</a> 
                </td>
            </tr>
        </table>
        </form>
    </td></tr>
</table>
</body>
</html>
  • 相关阅读:
    MongoDB下配置用户权限
    (CF)Codeforces445A DZY Loves Chessboard（纯实现题）
    C语言概述
    C#中值类型和引用类型的差别浅记
    Qt5官方demo解析集30——Extending QML
    汉澳sinox通过ndis执行windows驱动程序
    linux设备驱动归纳总结（三）：4.ioctl的实现【转】
    linux设备驱动归纳总结（三）：3.设备驱动面向对象思想和lseek的实现【转】
    linux设备驱动归纳总结（三）：2.字符型设备的操作open、close、read、write【转】
    linux设备驱动归纳总结（三）：1.字符型设备之设备申请【转】
  • 原文地址：https://www.cnblogs.com/KeenLeung/p/2495017.html
Copyright © 2011-2022 走看看