2016-11-26 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>表单练习</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<!--这是一个表单框架  method是提交的方式 action是要接收数据的服务器或者文件路径
enctype 上传文件的时候一定要加的属性，值是multipart/from-data 是固定的
-->
<form name="form1" method="post" action="login.php" enctype="multipart/from-data">
<!--为表格设置宽度为600px 边框为1px 边框颜色是淡灰色 对齐方式是剧中对齐 
 cellpadding是设置单元格边线到内容的距离，这里设置了5px rules=all 就是合并单元格的边框线-->
    <table width="600" border="1" bordercolor="#f0f0f0" align="center" cellpadding="5" rules="all">
        <tr>
            <!--让用户输入用户名和密码-->
            <td width="100" align="right">用户名：</td> <!--给一个单元格设置了宽度，下面的表格就可以不用设置宽度了-->
            <td><input type="text" name="username"/></td><!--文本型的编辑框-->
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td ><input type="password" name="userpwd"/></td><!--密码类型的编辑框-->
        </tr>
        <!--下面的是单选框-->
        <tr>
            <td align="right">性别：</td>
            <td>
            <input type="radio" name="sex" value="男"/>男<!--第一个单选框-->
            <input type="radio" name="sex" value="女" checked="checked"/>女
            <!--第二个单选框，这里加了一个checked="checked"意思是默认选中这一项-->
            </td>
        </tr>
        <!--下拉列表-->
        <tr>
            <td align="right">籍贯：</td>
            <td>
                <!--这里开始就是下拉列表-->
                <select name="city" style="width:100px"><!--用css样式设置列表的宽度-->
                    <option value="北京市">北京市</option>
                    <option value="天津市">天津市</option>
                    <option value="重庆" selected="selected">重庆市</option>
                    <!--selected="selecete" 意思是默认选中这一项-->
                </select>
                <!--这是列表的结束标记-->
            </td>
        </tr>
        <!--实现上传文件，功能要用javaScript才能实现-->
        <tr>
            <td align="center">上传头像：</td>
            <td><input type="file" name="uploadFile"/></td>
            <!--弄一个上传文件的按钮 命名为uploadFile-->
        </tr>
        <tr>
            <td>&nbsp;</td>
            <!--这里是提交表单和重新填写的功能实现-->
            <td>
                <input type="submit" value="提交表单"/>
                <input type="reset" value="重新填写"/>
                <input type="hidden" name="id" value="1263"/>
                <!--hidden 是隐藏区域 用户是看不到的，主要作用是给服务器传递ID-->
            </td>
        </tr>
    </table>
</form>
</body>
</html>

简单的表单练习

posted @ 2016-11-26 20:49  czbkhzh  阅读(121)  评论(1)    收藏  举报