前端学习笔记一:HTML(5)简单制作表单(以登陆页面为例)

    技术2026-08-21  6

    继续第五篇。

    第七个示例,管它叫登陆界面。 代码如下:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录</title> </head> <body> <form action="https://www.baidu.com"> <table border="1px" cellspacing="0px" align="center"> <thead> </thead> <tbody> <col width="80px"/> <col width="200px" /> <tr height="40px" align="center"> <td colspan="2">用户登录</td> </tr> <tr height="40px"> <td align="right">用户名:</td> <td> <input type="text" name="username"/> </td> </tr> <tr height="40px"> <td align="right">密码:</td> <td> <input type="password" name="password"/> </td> </tr> <tr height="40px" align="center"> <td colspan="2"> <input type="submit" value="登录" /> <input type="reset" value="重置" /> </td> </tr> </tbody> <tfoot> </tfoot> </table> </form> </body> </html>

    运行结果,先展示一下登陆页面: 可以在代码段里看到,当想制作一个登录或者任意形式的表单的时候,最好还是利用table标签作框架。利用行列标签的合并属性制作表头,输入提示和输入框和按钮,以及利用其它属性来设计样式。

    这次示例的新标签主要就是输入标签,大部分情况下,当你想在HTML网页上输入日志,用户名和密码等文本信息,以及制作相应的提交按钮的时候就需要用到<input>标签。 这个标签最常用的属性有姓名(name)、类型(type)和赋值(value),前两者是输入框的常用属性,后两者是按钮的常用属性。

    一个个来。类型**“type”**好理解,就是定义这个输入框或按钮里的内容是什么。 列举一些常用的类型好了

    type输入类型text文本输入框password密码输入框radio单选框checkbox复选框button普通按钮submit提交按钮reset重置按钮file文件选择框

    每个类型的对应的样子就不演示了,在网上冲浪这么多年了总得都见过的(

    姓名**“name”,一般用在输入框**上。在网页内向服务器上传账号密码信息的时候需要告知系统哪一个输入框内对应输入的是哪一项信息,这个对应的信息就存储在name内。

    赋值**“value”,一般用在按钮**, 显示按钮的内容,即点击这个按钮的功能是什么。如登录,重置,搜索等。

    还是懒得再单独搞示例了,再对照着示例看一遍好了((

    Processed: 0.009, SQL: 9