HTML(10) 登录表单制作

2020-10-22

使用表单提交数据

  • 比如我们需要账号输入框,密码输入框,提交按钮,单选框,复选框。
  • 这些都可以使用input标签实现

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <!-- 注意事项:
        1.form表单必须有action属性,表示提交地址
        2.所有需要提交的数据,input标签必须有name属性
        3.input按钮的文字,使用value属性表示
        4.input必须放在form标签内才能提交 -->
    <!-- input标签常见类型总结:
        1.文本输入框type=text
        2.密码输入框type=password
        3.单选框type=radio
        4.复选框type=checkbox
        5.普通按钮type=button
        6.提交按钮type=submit
        7.重置按钮type=reset
        8.文件选择框type=file -->
    <!-- input标签输入框和按钮 -->
    <!-- action请求的地址 -->
    <form action="http://www.baidu.com">
        <table align="center" margin-top="400px" width="500px" height="450px" border="1px" cellspacing="0">
            <tr>
                <td align="center">
                    <!-- name属性设置提交过去的名字,用于绑定信息 -->
                    用户名:<input type="text" name="loginName">
                    <br>
                    <br>
                    密码:&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="loginPassword">
                    <br>
                    <br>
                    <input type="submit" value="提交">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

显示

image.png


标题:HTML(10) 登录表单制作
作者:张范
地址:http://60.204.174.80/articles/2020/10/22/1603358699895.html