会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133965个问题

问题 :表单的不完美

            a、今天学习了表单 但是效果很是不理想 下面是自己找的表单练习 和效果图的对比

            b、问:如何像效果图一样美丽?表单如何对齐?

            c、代码区:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="ok.html" align="center">
      
       <p>* 会 员 名 <input type="text"></p>

       <p>*登录密码<input type="password"></p>

       <p>*重复密码<input type="password"></p>

       <p>*联系人姓名<input type="text"></p>

       <p>*企业名称<input type="text"></p>

       <p>
        *贸易身份
        <input type="checkbox">我要销售
        <input type="checkbox">我要采购
        <input type="checkbox">两者都是
       </p>
     
       <p>
           电话号码
           <select name="" id="">
             <option value="" selected>中国大陆+86</option>
             <option value="">hello word</option>
             <option value="">hello word</option>
             <input type="text">
           </select>




       </p>









    </form>
</body>
</html>

          d、效果图:(自己做的效果图展示)

          屏幕截图(165).png




                        e、理想图:

                         屏幕截图(164).png

WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 603楼

问题:自己做了一个个人简历的表格 请老师帮忙看看是否有问题

          a、周末对表格的练习和巩固知识

          b、代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
    <table cellspacing="0" border="1px" align="center" >
        <caption>个人简历表格</caption>
        <tr>
            <td colspan="11" align="center">个人简历</td>
        </tr>

        <tr>
            <td colspan="11" align="right" valign="top">流水号:###</td>
        </tr>

        <tr align="center">
            <td>*姓名</td>
            <td>hello</td>
            <td>*性别</td>
            <td>hello</td>
            <td>*生日</td>
            <td>hello</td>
            <td>*民族</td>
            <td>hello</td>
            <td colspan="3" rowspan="2" valign="top">照片</td> 
        </tr>

        <tr align="center">
            <td>*籍贯</td>
            <td>hello</td>
            <td>*身高</td>
            <td>hello</td>
            <td>*政治面貌</td>
            <td>hello</td>
            <td>*职位</td>
            <td>hello</td>
           
        </tr>

        <tr>     
        </tr>

        <tr align="center">
            <td>联系电话</td>
            <td colspan="3"></td>
            <td>昵称</td>
            <td colspan="2"></td>
            <td>个人爱好</td>
            <td colspan="3"></td>
          
        </tr>

        <tr align="center">
            <td>学校地址</td>
            <td colspan="3"></td>
            <td>*QQ</td>
            <td colspan="2"></td>
            <td>E-mail</td>
            <td colspan="3"></td>
        </tr>

        <tr>
            <td>什么方式了解?</td>
            <td colspan="10">&nbsp朋友介绍?&nbsp;网络?&nbsp;传单?&nbsp
                官网?&nbsp;?&nbsp传单?
            </td>
        
        </tr>

        <tr>
            <td rowspan="3" align="center">社会经历</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>

        <tr>
            <td rowspan="3" align="center">个人经历</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>

        <tr>
            <td rowspan="3" align="center">证书</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>
        <tr>
            <td rowspan="3" align="center">奖项</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>

    </table>
</body>
</html>

c、效果图:

屏幕截图(152).png

WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 606楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 609楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 610楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5新增元素 612楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS应用技巧 613楼

在作业3中产生疑问:当我把第二、第三两个form注释掉时,运行效果一样,那我是否可以只写第一个form,这样更简洁?

一、没注释前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3</title>
</head>
<body>
<table border="1" width="600" height="100" align="center" cellspacing="0"cellpadding="1">
    <tr>
        <td align="right">用户名:</td>
        <td align="center">
            <form action="ok.html" name="form1">
                <input type="text">
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">密码:</td>
        <td align="center">
            <form action="ok.html" name="form2">
                <input type="password" name="password">
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">性别:</td>
        <td align="center">
            <form action="ok.html" name="form3">
            <input type="radio" name="sex" checked>
            <lable for="man">男</lable>
            <input type="radio" name="sex">
            <lable for="woman">女</lable>
            </form>
        </td>
    </tr>
</table>
</body>
</html>

二、注释后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3疑问</title>
</head>
<body>
<table border="1" width="600" height="100" align="center" cellspacing="0"cellpadding="1">
    <tr>
        <td align="right">用户名:</td>
        <td align="center">
            <form action="ok.html" name="form1">
                <input type="text">
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">密码:</td>
        <td align="center">
<!--            <form action="ok.html" name="form2">-->
                <input type="password" name="password">
<!--            </form>-->
        </td>
    </tr>
    <tr>
        <td align="right">性别:</td>
        <td align="center">
<!--            <form action="ok.html" name="form3">-->
                <input type="radio" name="sex" checked>
                <lable for="man">男</lable>
                <input type="radio" name="sex">
                <lable for="woman">女</lable>
<!--            </form>-->
        </td>
    </tr>
</table>
</body>
</html>

效果一

image.png

效果二

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 615楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637