html表单

html表单

  1. 注册效果图

    ![](D:\ASSX\day2\作业\02 任务：html制作表单\效果图-注册.png)

  • 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="./hello.html">
        <table align="center" valign="middle">
            <tr>
                <td align="right">手机号码:</td>
                <td> <input type="tel" required></td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td> <input type="password" required></td>
            </tr>
            <tr>
                <td align="right">重复密码:</td>
                <td> <input type="password" required></td>
            </tr>
            <tr>
                <td align="right">图形验证码:</td>
                <td><input type="text">
                 <input type="image" src="./素材/iphone7_small.jpg" width="20" required></td>
            </tr>
            <tr>
                <td align="right">短信验证码:</td>
               <td valign="middle"> <input type="text">
                 <input type="image" src="./d2_任务素材/yanzhengma.jpg" height="20"required></td>
            </tr>
            <tr>
                <td align="center" colspan="2"> <input type="image" src="./d2_任务素材/register_img4.gif" ></td>
               
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="checkbox">我已阅读服务声明
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
    1. 简历_效果图_

    ![](D:\ASSX\day2\作业\02 任务：html制作表单\效果图-简历.jpg)

    • 代码

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="./hello.html">
        <table border="0">
            <tr>
                <td colspan="2" align="left">基本信息</td>
            </tr>

            <tr>
                <td align="right" width="200">姓名</td>
                <td><input type="text" required></td>
                <td>
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                </td>

            </tr>
            <tr>
                <td align="right">出生日期</td>
                <td> <input type="date" required></td>
            </tr>

            <tr>
                <td align="right">手机号码</td>
                <td><input type="tel" required></td>
            </tr>
            <tr>
                <td align="right">Email</td>
                <td colspan="2"><input type="email" required></td>
            </tr>
            <tr>
                <td align="right">工作年限</td>
                <td>

                    <select name="time">
                        <option value="0">请选择</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="3">其他</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">居住地</td>
                <td>
                    <input type="text" list="add" placeholder="请选择或输入" required />
                    <datalist id="add">
                        <option value="哈尔滨"></option>
                        <option value="北京"></option>
                        <option value="上海"></option>
                        <option value="重庆"></option>
                        <option value="其他"></option></datalist>
                </td>
            </tr>
            <tr>
                <td align="right">求职状态</td>
                <td> 
                    <select name="state" required>
                        <option value="0">观察有好的机会再考</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">其他</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">户口</td>
                <td>
                    <select name="state" required>
                        <option value="0">请输入或选择</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">其他</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td align="right">
                    目标薪资
                </td>
                <td><select name="sal" required>
                        <option value="0">年薪</option>
                        <option value="1">月薪</option>
                        <option value="2">日薪</option>

                        <option value="4">其他</option>
                    </select></td>
                <td>
                    <input type="text" list="sall" placeholder="请选择" required />
                    <datalist id="sall">
                        <option value="1w"></option>
                        <option value="5w"></option>

                </td>
                <td align="left">/年</td>
                <td>
                    <select name="money" required>
                        <option value="0">人民币</option>
                        <option value="1">美元</option>
                        <option value="2">其他</option>

                    </select>
                </td>
            </tr>
            <br>
            <tr>
                <td align="right">国家和地区</td>
                <td> <select name="country" required>
                        <option value="0">中国大陆</option>
                        <option value="1">美国</option>
                        <option value="2">其他</option>

                    </select></td>
            </tr>

            <tr>
                <td align="right">证件号</td>
                <td> <select name="paper" required>
                        <option value="0">身份证</option>
                        <option value="1">户口</option>
                        <option value="2">其他</option>

                    </select></td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td align="right">公司电话</td>
                <td> <input type="text" placeholder="086">-</td>
                <td> <input type="text" placeholder="区号">-</td>
                <td> <input type="text" placeholder="总机号码">-</td>
                <td> <input type="text" placeholder="分机"></td>

            </tr>

            <tr>
                <td align="right">家庭电话</td>
                <td> <input type="text" placeholder="086">-</td>
                <td> <input type="text" placeholder="区号">-</td>
                <td> <input type="text" placeholder="电话号码">-</td>


            </tr>

            <tr>
                <td align="right">婚姻状况</td>
                <td><select name="state" required>
                        <option value="0">请选择</option>
                        <option value="1">已婚</option>
                        <option value="2">未婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select></td>
                <td align="right">身高</td>
                <td><input type="text"></td>

            </tr>

            <tr>
                <td align="right">政治面貌</td>
                <td><select name="sta" required>
                        <option value="0">请选择</option>
                        <option value="团员">1</option>
                        <option value="党员">2</option>
                        <option value="其他">3</option>

                    </select></td>
                <td align="right">邮编</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td align="right">微信号</td>
                <td><input type="text"></td>
                <td align="right">QQ号</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td align="right">家庭地址</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td align="right">个人主页</td>
                <td><input type="text"></td>
            </tr>

            <tr>
                <td colspan="4" align="center">
                    <input type="submit" value="保存">
                </td>
            </tr>

        </table>

        <br>

        <table width=border="0">
            <tr>
                <td align="left" width="150">教育经历</td>

            </tr>

            <tr>
                <td align="right">时间</td>
                <td><input type="text" placeholder="年" required>
                    <input type="text" placeholder="月" required>到
                    <input type="text" placeholder="年" required>
                    <input type="text" placeholder="月" required>（后两项不填表示至今）
                </td>

            </tr>

            <tr>
                <td align="right">学校</td>
                <td><input type="text" required></td>
            </tr>

            <tr>
                <td align="right">专业</td>
                <td><select name="profession" required>
                        <option value="0">请选择</option>
                        <option value="1">土木工程</option>
                        <option value="2">计算机科学</option>
                        <option value="3">哲学</option>

                    </select>
                    <input type="text" placeholder="找不到？在此输入">
                </td>

            </tr>

            <tr>
                <td align="right">学历</td>
                <td><select name="qualification" required>
                        <option value="0">请选择</option>
                        <option value="1">中专</option>
                        <option value="2">大专</option>
                        <option value="3">本科</option>
                        <option value="4">其他</option>
                    </select>
                    <input type="checkbox">全日制
                </td>
            </tr>

            <tr>
                <td align="right">专业描述</td>
                <td>
                    <textarea cols="80" rows="10"></textarea>
                </td>
            </tr>

            <tr>
                <td align="right">海外学习经历</td>
                <td><input type="radio" name="true">是
                    <input type="radio" name="true">否
                </td>
            </tr>
            <tr>
                <td colspan="5" align="center"> <input type="submit" value="保存">
                    <input type="reset" value="删除">
                </td>
            </tr>
        </table>

        <br>

        <table border="0">
            <tr>
                <td align="left" width="150" colspan="4">工作经验（无工作经验的学生可以不填）</td>

            </tr>

            <tr>
                <td align="right">时间</td>
                <td><input type="text" placeholder="年" required>
                    <input type="text" placeholder="月" required>到
                    <input type="text" placeholder="年" required>
                    <input type="text" placeholder="月" required>（后两项不填表示至今）
                </td>

            </tr>

            <tr>
                <td align="right">公司</td>
                <td><input type="text" required></td>
            </tr>

            <tr>
                <td align="right">
                    行业
                </td>
                <td> <input type="text" list="time" placeholder="请选择" required />
                    <datalist id="time">
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>
                </td>
            </tr>

            <tr>
                <td align="right">公司规模</td>
                <td><select name="gm" required>
                        <option value="0">请选择</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp公司性质
                    <select name="xz" id="" required>
                        <option value="0">请选择</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>

                </td>
            </tr>

            <tr>
                <td align="right">部门</td>
                <td><input type="text" required></td>
            </tr>

            <tr>
                <td align="right">职能类别</td>
                <td>
                    <input type="text" list="time" placeholder="请选择" required />
                    <datalist id="time">
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>

                </td>
            </tr>

            <tr>
                <td align="right">职位名称</td>
                <td><input type="text"></td>
            </tr>



            <tr>
                <td align="right">工作描述</td>
                <td>
                    <textarea cols="80" rows="10"></textarea>
                </td>
            </tr>

            <tr>
                <td align="right">工作类型</td>
                <td><input type="radio" name="true">全职
                    <input type="radio" name="true">兼职
                </td>
            </tr>
            <tr>
                <td colspan="5" align="center"> <input type="submit" value="保存">

                </td>
            </tr>
        </table>

        <br>

        <table border="0">
            <tr>
                <td align="left" colspan="5">求职意向</td>

            </tr>

            <tr>
                <td align="right">关键词</td>

                <td><input type="text">
                    请输入代表你个人的关键词；限10个，用空格隔开。如行业、特长、业绩等，每
                    词不超过6个汉字(12个英文字母)。

                </td>
            </tr>

            <tr>
                <td align="right">自我评价</td>
                <td><textarea name="" id="" cols="100" rows="10" required></textarea></td>
            </tr>

            <tr>
                <td align="right">地点</td>
                <td><input type="text" list="spot" placeholder="请选择或输入" required />
                    <datalist id="spot">
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>
                </td>
            </tr>
            <td align="right"> 行业</td>
            <td><input type="text" list="industry" placeholder="请选择或输入" required />
                <datalist id="industry">
                    <option value="1"></option>
                    <option value="2"></option>
                    <option value="3"></option>
                    <option value="4"></option>
                    <option value="5"></option>
            </td>
            <tr>
                <td align="right">职能</td>
                <td><input type="text" list="industry" placeholder="请选择或输入" required />
                    <datalist id="industry">
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5"></option>
                </td>
            </tr>
            <tr>
                <td align="right"> 工作类型</td>
                <td><select name="profes" id="">
                        <option value="0">全职</option>
                        <option value="1">兼职</option>

                        <option value="4">其他</option>


                    </select></td>
            </tr>

            <tr>
                <td align="right">期望薪资</td>
                <td>
                    <select name="sal" id="">
                        <option value="0">月薪</option>
                        <option value="1">年薪</option>

                        <option value="4">其他</option>

                        

                    </select>


                    <input type="text" list="sal" placeholder="请选择" required />
                        <datalist id="sal">
                            <option value="1"></option>
                            <option value="2"></option>
                            <option value="3"></option>
                            <option value="4"></option>
                            <option value="5"></option>
                            </datalist>/月

                            <input type="submit" value="薪资查询">



                </td>

            <tr>
                <td align="right"> 到岗时间</td>
                <td> <select name="tim" id="">
                        <option value="0">待定</option>
                        <option value="1">准时</option>
                        <option value="2">其他</option>
                    </select></td>
            </tr>
            <tr>
                <td colspan="5" align="center">
                    <input type="submit" value="保存">
                </td>
            </tr>


        </table>
    </form>
</body>

</html>
posted @ 2022-05-31 17:11  程序员_Mr_山  阅读(37)  评论(0)    收藏  举报