HTML-Week 6-Form-ログインページと登録ページへのジャンプ (最後のコード)

 


(u1s1、日付はとても使いやすいです)

注釈付き<!--コメントセクション-->

ログイン

 

登録する

 

 

 ログインページ

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <!--http://a.test.com-->
        <button><font size="20">log in</font></button><!--登录页面标题-->
            <table>
                <form name="登录页面" method="post" action="https://baidu.com"><!--action:吃到 type:submit 后的反应-->
                <tr><td>
                    <img src="C:\Users\Administrator\Desktop\web\外星人.jpg" width="40px" height="50px"></td><!--用户(外星人)图标-->
                    <td>用户名:</td>
                    <td>
                        <input type="text" name="textbox1" /><!--用户名输入-->
                    </td></tr>
                <tr><td><img src="C:\Users\Administrator\Desktop\web\锁.jpg" width="40px" height="50px"></td><!--密码(锁)图标-->
                    <td>密码:</td>
                    <td>
                        <input type="password" name="textbox2" /><!--密码类型,隐藏式-->
                    </td></tr>
                <tr><td>
                    
                <!--<button>提交</button>-->
                    <input type="submit" value="提交" /><!--提交键 与第10行action键互动-->
                </td><td>
                    <input type="reset" value="重置 " /><!--重置 所处的form内 所有的input填写的东西-->
                </td><td>
                    <a href="C:\Users\Administrator\Desktop\web\快速注册.html" value="注册页面"><u>快速注册</u></a><!--快速注册-->               
                </td></tr>
            </form>
            </table>

    </body>
</html>

登録ページ

<!DOCTYPE html>
<html>
    <head>
        <meta charest="utf-8" />
        <meta name="keywords" content="快速注册网页">
    </head>
    <body>
        <table>
            <form name="快速注册页面" method="get" action="https://www.so.com/s?q=%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F&src=srp&fr=360se7_addr&psid=45c190ae8147b898f5b174007b400267">
            <tr><!--用户名-->
                <td>
                    <img src="C:\Users\Administrator\Desktop\web\外星人.jpg" width="40px" height="50px">
                </td>
                <td>
                    用户名:
                </td>
                <td>
                    <input type="text" name="textbox1" />
                </td>
            </tr>
                
            <tr><!--密码-->
                <td>
                    <img src="C:\Users\Administrator\Desktop\web\锁.jpg" width="40px" height="50px">
                </td>
                <td>
                    密码:
                </td>
                <td>
                    <input type="password" name="textbox2" />
                </td>
            </tr>
            <tr><!--性别选择-->
                <td>
                    man<input type="radio" value="man" name="textbox3"  /><!--radio 按钮-->                    
                </td>
                <td>
                    woman<input type="radio" value="woman" name="textbox4" checked/><!--check 默认选择-->
                </td>
            </tr>
            <tr><!--邮箱-->
                <td>
                    电子邮箱:
                </td>
                <td colspan="2">
                    <input type="text" placeholder="[email protected]"><!--placeholder 自带默认邮箱-->
                </td>
            </tr>
            <tr><!--国家-->
                <td>
                    国籍:
                </td>
                <td>
                    <select name="select your country"><!--下拉选择栏 头-->
                        <option value="CHINA">CHINA </option><!--选择栏-->
                        <option value="USA">USA </option>
                        <option value="UK">UK </option>
                    </select><!--尾-->
                </td>
            </tr>
            <tr><!--出生日期-->
                <td>
                    出生日期:
                </td>
                <td>
                    <input type="date"/><!--日期选择栏 非常方便-->
                </td>
            </tr>
            <tr><!--注册备注-->
                <td>
                    注册备注:
                </td>
                <td>
                    <textarea name="注册备注" cols="15" rows="4"> </textarea><!--文本域 多行 带下拉滚动条-->
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="提交"/>
                </td>
                <td>
                    <input type="reset" value="重置"/>
                </td>
            </tr>
            
            </form>
        </table>
    </body>
</html>

おすすめ

転載: blog.csdn.net/weixin_56537692/article/details/123939123