【实用】HTML的简单示例（表单篇）
效果如下：
代码内容：
<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知识点
<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>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/rightcellpadding： 设置单元格的内边距cellspacing: 设置单元格的外边距bgcolor: 设置背景颜色创建行标签bgcolor：align：设置当前行中水平对齐方式取值：left/center/rightvalign: 设置当前行内容的垂直对齐方式取值：top/middle/bottom，默认垂直居中创建单元格标签bgcolor：align：设置当前行中水平对齐方式取值：left/center/rightvalign: 设置当前行内容的垂直对齐方式取值：top/middle/bottom，默认垂直居中单元格合并跨列横向合并：colspancolspan="3" 表示跨3列合并，包含自身在内跨行纵向合并：rowspanrawspan='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后面安全性低提交数据最大2kBpost将数据提交给服务器处理特点：隐式提交，看不到提交数据安全性较高没有数据大小限制...2.表单控件提供可视化用户交互组件只有放在表单元素中的表单控件才允许被提交文本框和密码框语法：文本框：<input type="text">密码框：<input type='password'>属性：必填name 定义当前控件的名称，选填value 提交给服务器的值maxlength 用来限制用户输入最大的输入字符数placeholder 密文掩码单选框和复选框单选框 <input type='radio'>复选框 <input type='checkbox'>属性：name 定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致value 设置当前控件的值，最终提交组服务器cheked 设置预选状态，可以省略属性值，也可以使用checked作为属性值隐藏域和文件选择框隐藏域作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放语法：<input type="hidden">属性：namevalue文件选择框作用：选择文件上传给服务器<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>属性：namecols 指定文本域默认显示的列数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一致
代码参考
<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>25td><td>000000000000td>tr><tr> 小明td><td>23td><td>111111111111td>tr><tr align="center" valign="bottom"><td> 小明td><td>24td><td>222222222222td>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>20td><td>三年二班td>tr><tr><td>李四td><td>20td><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>
效果如下：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
