表单作业练习

一、完成效果

二、代码段

<form action="formfr.php" method="GET">
        <table bgcolor="#f2f2f2" align="center" width="500px">
            <tr >
                <td align="right">姓名：</td>
                <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="email" name="usermail" id="e-mail" value="@163.com" size="35" maxlength="10"></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" name="userpw" placeholder="请输入密码" size="25" maxlength="6"></td>
            </tr>
            <tr>
                <td align="right" >确认密码：</td>
                <td><input type="password" name="respww" placeholder="请再次确认密码" size="25" maxlength="6"></td>
            </tr>
            <tr>
                <td align="right">上传照片：</td>
                <td><input type="file" name="" id=""></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>
                    男<input type="radio" name="sexuser1" id="sex" checked>
                    女<input type="radio" name="sexuser1" id="sex2">
                </td>
            </tr>
            <tr>
                <td align="right">爱好：</td>
                <td>
                    读书<input type="checkbox" name="read" id="like1" value="read" checked>
                    跳舞<input type="checkbox" name="dace" id="like2" value="dance">
                    唱歌<input type="checkbox" name="sing" id="like3" value="sing">
                    
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="hidden" name="hidden" id="nn" value="用户注册信息">
                </td>
             </tr>
             <tr >
                 <td align="right" valign="bottom">城市：</td>
                 <td align="left">
                     <!--下拉菜单-->
                    <select name="city">
                        <option value="">--请选择--</option>
                        <option value="北京" selected>北京</option>
                        <option value="上海">上海</option>
                        <option value="天津">天津</option>
                        <option value="河北">河北</option>
                        <option value="河南">河南</option>
                        <option value="厦门">厦门</option>
                        <option value="四川">四川</option>
                    </select>

            
                    <select name="city" size="6" multiple>
                        <option value="">--请选择--</option>
                        <option value="北京" selected>北京</option>
                        <option value="上海">上海</option>
                        <option value="天津">天津</option>
                        <option value="河北">河北</option>
                        <option value="河南">河南</option>
                        <option value="厦门">厦门</option>
                        <option value="四川">四川</option>
                    </select>
                    <!--分组下拉菜单-->
                    <select name="请选择" id="" size="6" >
                        <option value="">--请选择--</option>
                        <optgroup label="华北">
                            <option value="北京" selected>北京</option>
                            <option value="上海">上海</option>
                            <option value="天津">天津</option>
                        </optgroup>
                        <optgroup label="华西">
                            <option value="河北">河北</option>
                            <option value="河南">河南</option>
                            <option value="厦门">厦门</option>
                            <option value="四川">四川</option>
                        </optgroup>
                    </select>
                 </td>
             </tr>
             <tr>
                 <td align="right" valign="top">简介：</td>
                 <td>
                     <textarea name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
                     
                 </td>
             </tr>
             <tr align="center">
                
                <td colspan="2" >
                    <input type="button" value="来点我">
                    <input type="submit" value="提交"> 
                    <input type="reset" value="重置">
                    <input type="image" height="20px" width="50px"
                     src="../img/Snipaste_2021-08-20_15-40-29.png"  value="">
                </td>
            </tr>
            
        </table>
        
        
    </form>