html表单

来源：互联网发布：淘宝客刷销量有什么用编辑：程序博客网时间：2024/05/22 00:37

理论：http://write.blog.csdn.net/mdeditor

get 发送较少的数据，并显示在url中
post 可发送较多的数据量，安全
action 决定form中数据交给服务器端哪个程序进行处理

例子效果图

直接点提交得到的url=
http://localhost:61025/html/html/css/01.jsp?userName=&password=&sex=boy&interest=vc&interest=jsp&interest2=jump&interest3=jump&intro=

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        table, td {            border: 1px solid #006        }        table {            background-color: #cccccc;        }        td {            background-color: #fff        }        /*td  是tr的子元素 给td设置的背景色覆盖了，给tr加的hover背景色，把td的背景色去掉就好，hover一般都加到td上*/        tr {            background-color: red;        }        td:hover {            background-color: aquamarine;        }        /*这个属性是有用的，隐藏表格中空单元格上的边框和背景：*/        .t {            border-spacing: 10px 6px;            empty-cells: hide;        }    </style></head><body><form action="01.jsp" method="get">    <table border="1" align="center" width="750">        <caption>表单</caption>        <tr>            <td colspan="2" align="center">用户注册</td>        </tr>        <tr>            <td>用户名</td>            <td>                <input type="text" name="userName" size="30"/>            </td>        </tr>        <tr>            <td>密码</td>            <td>                <input type="password" name="password" maxlength="10"/>            </td>        </tr>        <tr>            <td>性别(radio同名不同value)</td>            <td>                <input type="radio" name="sex" value="boy" checked>男                <input type="radio" name="sex" value="girl">女            </td>        </tr>        <tr>            <td>兴趣：(checkBox同名不同值)</td>            <td>                <input type="checkbox" name="interest" value="vc"checked>VC                <input type="checkbox" name="interest" value="vb">VB                <input type="checkbox" name="interest" value="java">JAVA                <br>                <input type="checkbox" name="interest" value="c#">C#                <input type="checkbox" name="interest" value="python">python                <input type="checkbox" name="interest" value="php">php            </td>        </tr>        <!--看不见  但是都会提交到服务器的-->        <input type="hidden" name="interest" value="jsp">        <!--多选列表-->        <tr>            <td>列表 可多选 显示四个，按ctrl多选</td>            <td>                <select name="interest2" size="4" multiple>                    <option value="jump" selected>跳</option>                    <option value="swim">游泳</option>                    <option value="run">跑步</option>                    <option value="walk">走路</option>                    <option value="watch">看</option>                </select>            </td>        </tr>        <!--多选列表-->        <tr>            <td>列表 单选</td>            <td>                <select name="interest3" >                    <option value="jump" selected>跳</option>                    <option value="swim">游泳</option>                    <option value="run">跑步</option>                    <option value="walk">走路</option>                    <option value="watch">看</option>                </select>            </td>        </tr>        <tr>            <td>自我介绍</td>            <td>              <textarea rows="12" cols="60" name="intro" wrap="hard"></textarea>            </td>        </tr>        <tr>            <td  colspan="2" align="cen">                <input type="submit" value="提交">                <input type="reset" value="重置">                <input type="button" value="这个按钮只有在javaScript">            </td>        </tr>    </table></form></body></html>

0 0