【实用】HTML的简单示例（表单篇）

科技2026-08-16 15

效果如下：

代码内容：

<html> <head> <title>增加管理员</title> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <table> <thead></thead> <tbody> <tr> <td>姓名：</td> <td> <input type="text" name="uname" value="test2yzx"> </td> <td>十个字符以内</td> </tr> <tr> <td>密码：</td> <td> <input type="password" name="upasswd"> </td> <td>十个字符以内</td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="female" checked>女士 <input type="radio" name="gender" value="male">男士 </td> <td></td> </tr> <tr> <td>角色：</td> <td> <input type="checkbox" name="role" value="superAdmin">超级管理员 <br> <input type="checkbox" name="role" value="financialAdmin">账单管理员 </td> <td>至少选择一个角色</td> </tr> <tr> <td>头像：</td> <td> <input type="file"> </td> </tr> <tr> <td></td> <td> <input type="submit" name="submit" value="保存"> <input type="reset" name="submit" value="重置"> </td> <td></td> </tr> </tbody> </table> </form> </body> </html>

HTML知识点

<!doctype html> <html> <head> <title>文本</title> <meta charset='utf-8'> </head> <body> 网页主体 </body> </html> 2.常见的标签标题标签<h1-h6></h1-h6> 段落标签<p></p> 加粗b 斜体 i 下滑线 u 删除线 s 上标sup 下标 sub 块分区 div 行内分区 span 换行 br hr 有序列表 ol 无序列表 ul <ol> <li> <ul> <li></li> </ul> </li> </ol> 列表项目 li 图片标签<img src="" alt=""> 标签的分类块元素 h1 - h6 p div ul ol li 行内元素 span i b u s sub sup 特点可以与多少升元素在一行显示 ============================================================ 1.超链接标签定义：从当前文件跳转到其他文件的标签语法： <a>超链接文本</a> 标签属性：必填属性：指定跳转的链接地址，以路径给出 <a href="www.baidu.com"></a> <a href="#"></a> 表示跳转到当前页选填属性： <a href="www.baidu.com",target="_blank"></a> target可填值内容： _self：默认值，表示当前窗口打开 _blank：表示新建窗口打开锚点链接：链接到当前文件的指定位置语法：设置锚点 <a name='anchor1'></a> 设置跳转 <a href="#anchor1"></a> 2.表格语法：标签介绍表格标签：<table></table> 行标签：<tr></tr> 单元格标签：<td></td> 创建顺序创建表格标签 border:边框设置，取值以px为单位（px可以省略） width: 设置宽度 height: 设置高度 align: 设置表格在其父元素中的水平对齐方式取值：left/center/right cellpadding：设置单元格的内边距 cellspacing: 设置单元格的外边距 bgcolor: 设置背景颜色创建行标签 bgcolor： align：设置当前行中水平对齐方式取值：left/center/right valign: 设置当前行内容的垂直对齐方式取值：top/middle/bottom，默认垂直居中创建单元格标签 bgcolor： align：设置当前行中水平对齐方式取值：left/center/right valign: 设置当前行内容的垂直对齐方式取值：top/middle/bottom，默认垂直居中单元格合并跨列横向合并：colspan colspan="3" 表示跨3列合并，包含自身在内跨行纵向合并：rowspan rawspan='5' 表示跨5行合并，包含自身在内行分组表格结构语法：表头行分组 <thead> <tr> <td></td> </tr> </thead> 表尾行分组 <tfoot> <tr> <td></td> </tr> </tfoot> 表主体分组 <tbody> <tr> <td></td> </tr> </tbody> 3.表单定义：接收用户数据接收用户的数据并且提交给服务器要素： 1.form 表单元素收集用户信息并提交给服务器语法： <form> 表单控件 </form> 标签属性： action 用来指定数据提交的目的地址 method 用来设置提交数据的请求方式 get(默认) 提交数据以参数拼接在URL后面安全性低提交数据最大2kB post 将数据提交给服务器处理特点：隐式提交，看不到提交数据安全性较高没有数据大小限制 ... 2.表单控件提供可视化用户交互组件只有放在表单元素中的表单控件才允许被提交文本框和密码框语法：文本框：<input type="text"> 密码框：<input type='password'> 属性：必填 name 定义当前控件的名称，选填 value 提交给服务器的值 maxlength 用来限制用户输入最大的输入字符数 placeholder 密文掩码单选框和复选框单选框 <input type='radio'> 复选框 <input type='checkbox'> 属性： name 定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致 value 设置当前控件的值，最终提交组服务器 cheked 设置预选状态，可以省略属性值，也可以使用checked作为属性值隐藏域和文件选择框隐藏域作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放语法：<input type="hidden"> 属性： name value 文件选择框作用：选择文件上传给服务器 <input type="file"> 属性： name 下拉选择框 <select name="province"> <option value="heibei">河北省</option> <option value="fujian">福建省</option> <option value="guangdong">广东省</option> </select> 假设用户选择河北省，GET提交数据时，URL拼接数据province=hebei 文本域支持用户输入多行文本语法： <textarea></textarea> 属性： name cols 指定文本域默认显示的列数 rows 指定文本域能够显示的行数按钮提交按钮 <input type="submit"> 作用：将表单数据提交给服务器重置按钮 <input type="reset"> 将表单内容恢复到初始化状态普通按钮 <input type="button"> 可以绑定自定义事件 <button>按钮显示的文本</button> 注意：不局限在form表单中使用使用在form中默认具有提交功能，等同input submit 可以添加type属性，取值submit reset button 特殊用法 label for ID 优化按钮样式语法： <label for="male">男</label> <input type="radio" name="gender" value="male" id="male"> 为label标签添加for属性与到操作的控件ID一致

代码参考

<!doctype html> <html> <head> <title>百度</title> <meta charset='utf-8'> </head> <body>  <a href="http://www.baidu.com">百度一下你就知道</a> <a href="http://www.baidu.com" target='_blank'>百度一下你就知道</a>  <a href="abc-123.jpg" target="_blank">百度一下你就知道</a> <a href="file:///home/deepin/">列表页</a> <a href="#"> <b>超链接文本</b> </a>  <a href="#"> <img src="abc-123.jpg" width="200px"> </a> <a href=""> <img src="abc-123.jpg" width="200px"> </a> <h1>目录</h1> <p> <a href="#actors">演员介绍</a><br> </p>  <table border="1" width="300px" height="300px" align="center" cellpadding='5' cellspacing='10' bgcolor='yellow'> <tr bgcolor="pink" align="right" valign="top"> <td>小红</td> <td>25</td> <td>000000000000</td> </tr> <tr> <td width="70",height="70",align="center",valign="center",bgcolor="blue"> 小明</td> <td>23</td> <td>111111111111</td> </tr> <tr align="center" valign="bottom"> <td> 小明</td> <td>24</td> <td>222222222222</td> </tr> </table> <table border="1px" align="center" width='300px' height="300px"> <tr> <td bgcolor="blue" width="100px" height='100px' > 西游记 </td> <td bgcolor="yellow"> 三国演义 </td> <td bgcolor="red"> 聊斋志异 </td> </tr> <tr> <td bgcolor="blue" width="100px" height='100px' > 西游记 </td> <td bgcolor="yellow"> 三国演义 </td> <td bgcolor="red"> 聊斋志异 </td> </tr> </table>  <table border="1px" bgcolor="blue" width="500px" height="300px" align="center"> <tr> <td colspan="3">姓名：</td> <td colspan="3">班级：</td> </tr> <tr> <td>星期</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> </tr> <tr> <td rowspan='4'>上午</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>  <table border="1px"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>班级</td> </tr> </thead> <tfoot> <tr> <td colspan="2">总计</td> <td>人</td> </tr> </tfoot> <tbody> <tr> <td>张三</td> <td>20</td> <td>三年二班</td> </tr> <tr> <td>李四</td> <td>20</td> <td>三年二班</td> </tr> </tbody> </table>  <form action="1.php" method="GET">   <p> 用户名称： <input type='text' name='uname' value="test2yzx" maxlength="8" placeholder="请输入用户名"> <span>最大输入长度8位</span> </p> <p> 用户密码： <input type='password' name='upasswd' value="123456"> </p> <p> 用户性别： <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女 </p> <p> 兴趣爱好： <input type="checkbox" name="hobby" value="game" checked>打游戏 <input type="checkbox" name="hobby" value="drink">喝酒 <input type="checkbox" name="hobby" value="hothair">烫头 </p> <input type="hidden" name="UID" value="10010"> <p> 上传文件： <input type="file" name="ufile"> </p> <p> 选择省份： <select name="province"> <option>河北省</option> <option>广东省</option> <option>福建省</option> </select> </p> <p> 个性签名： <textarea name="uINFO" cols="50" rows="10"></textarea> </p> <p> <input type="submit" name="submit" value="注册"> <input type="reset" name="reset" value="取消"> <input type="button" name="click" value="点我"> </p> <P> 用户性别： <input type="radio" name="gender" value="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">女</label> </P> <button>登录（button-submit）</button> <p> <a name="actors">锚点位置</a> </p> </form> </body> </html>

效果如下：

Processed: 0.008, SQL: 9