HTML表单表格综合练习

最新推荐文章于 2023-10-17 14:42:06 发布
最新推荐文章于 2023-10-17 14:42:06 发布
阅读量2.7k 收藏 8
点赞数 1
分类专栏： HTML 文章标签： HTML 表格标记 表单标记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34416191/article/details/51596988
版权 
<!--html--文件声明，让浏览器知道这是HTML文件-->
<html>
	  <!--head--开头，提供文件整体资讯-->
	  <head>
	  	  <!--title--标题,定义文件标题，显示与浏览页面顶部-->
	  	  <title>QQ注册</title>
	  </head>
	  <!--body--本文，设计文件格式，显示本文内容-->
	  <body>
	  	  <!--fieldset--分组标签，显示分组边框-->
	  	  <fieldset>
	  	  	  <!--legend--分组标题，标题嵌入分组边框中-->
	  	  	  <legend>欢迎注册QQ账号</legend>
	  	  	  <!--form--表单标记  action--表单提交的目标  method：表单提交的方式，包括post，get-->
	  	  	  <form action="http://qzone.qq.com" method="post">
	  	  	  <!--table--表格标记  border--表格边框粗细  bordercolor--表格边框颜色  cellpadding--单元格填充  cellspacing--单元格间距 width--表格宽度-->
	  	  	  <table border="1" bordercolor="red" cellpadding="20" cellspacing="0" width="500">
	  	  	  	  <!--tr--表格行-->
	  	  	  	  <tr>
	  	  	  	  	   <!--td--表格列  align--单元格对齐方式   --空格-->
	  	  	  	  	   <td align="right">注册邮箱:  </td>
	  	  	  	  	   <!--text--表单类型，单行文本框  表单控件名称，方便脚本调用  表单宽度-->
	  	  	  	  	   <td><input type="text" name="email" size="20"></td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	   <td></td>
	  	  	  	  	   <!--a--连接标记  href--超链接，下表示空链接-->
	  	  	  	  	   <td>你可以使用<a href="#">账号</a>注册或<a href="#">手机号</a>注册</td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	   <td align="right">密码:  </td>
	  	  	  	  	   <!--password--密码框-->
	  	  	  	  	   <td><input type="password" name="psd" size="20"></td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	   <td align="right">真实姓名:  </td>
	  	  	  	  	   <td><input type="text" name="username" size="20"></td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	   <td align="right">性别:  </td>
	  	  	  	  	   <!--radio--单选按钮  两个选项的name为同一值才能实现单选-->
	  	  	  	  	   <td><input type="radio" name="sex">男    <input type="radio" name="sex">女 </td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	  <td align="right">出生年月:  </td>
	  	  	  	  	  <td>
	  	  	  	  	  	  <!--select--下拉列表-->
	  	  	  	  	  	  <select name="year">
	  	  	  	  	  	  	  <!--option--下拉列表选项-->
	  	  	  	  	  	      <option value="1990">1990</option>
	  	  	  	  	  	      <option value="1991">1991</option>
	  	  	  	  	  	      <option value="1992">1992</option>
	  	  	  	  	  	      <option value="1993">1993</option>
	  	  	  	  	      </select>年
	  	  	  	  	      <select name="month">
	  	  	  	  	  	      <option value="1">1</option>
	  	  	  	  	  	      <option value="2">2</option>
	  	  	  	  	  	      <option value="3">3</option>
	  	  	  	  	  	      <option value="4">4</option>
	  	  	  	  	      </select>月
	  	  	  	  	      <select name="day">
	  	  	  	  	  	      <option value="21">21</option>
	  	  	  	  	  	      <option value="22">22</option>
	  	  	  	  	  	      <option value="23">23</option>
	  	  	  	  	  	      <option value="24">24</option>
	  	  	  	  	      </select>日
	  	  	  	  	  </td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	  <td align="right">爱好:  </td>
	  	  	  	  	  <td>
	  	  	  	  	  	  <!--checkbox--多选按钮-->
	  	  	  	  	  	  <input type="checkbox" name="hobby" >唱歌   
	  	  	  	  	  	  <input type="checkbox" name="hobby" >运动   
	  	  	  	  	  	  <input type="checkbox" name="hobby" checked>看书   
	  	  	  	  	  </td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	  <td align="right">个性签名:  </td>
	  	  	  	  	  <!--textarea--多行文本框-->
	  	  	  	  	  <td><textarea name="signature" cols="20" rows="3">填写你的个性签名吧!</textarea></td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	  <td></td>
	  	  	  	  	  <!--img--图形标记  src--图片路径-->
	  	  	  	  	  <td><img src="1.jpg" height="30" width="50"><a href="1.html" >看不清，换一张</a></td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	  <td align="right">验证码:  </td>
	  	  	  	  	  <td><input type="text" name="yzm" size="20"></td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	  <td></td>
	  	  	  	  	  <!--image--图片按钮 后接src，作用同submit按钮-->
	  	  	  	  	  <td><input type="image" src="2.gif" name="goto"></td>
	  	  	  	  </tr>
	  	  	  	  <tr>
	  	  	  	  	  <!--colspan--跨列，合并水平方向单元格-->
	  	  	  	  	  <td colspan="2" align="center">
	  	  	  	  	  	  <!--submit--提交按钮  value值显示在按钮上   reset--重置按钮，清空内容-->
	  	  	  	  	  	  <input type="submit" value="提交">      <input type="reset">
	  	  	  	  	  </td>
	  	  	  	  </tr>
	  	  	
	  	      </table>
	  	  	  </form>
	  	  	  
	  	  </fieldset>
	  	  
	  </body>
</html>

须佐能乎！
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中表格练习
wyqwilliam的博客
12-05 352
<html> <head> <title>表格的学习</title> <meta charset="UTF-8"/> </head> <body> <h3>表格的学习</h3> <hr /> <table style="border-bottom...
HTML表格表单
qq_55636063的博客
05-08 1590
HTML表格表单
06.作业（表格）.html
07-21
table标签等实现的网页表格，包括表格样式，span标签，合并行合并列等。需要的自行下载
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2524
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
表单处理之综合练习
weixin_33973609的博客
09-11 89
实现功能界面如下:实现代码(index.html文件):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .edit-mode{ ...
html表单专项练习
墨城烟柳ベ旧人殇的博客
04-04 713
本人主要介绍用html完成表单的建立。
html表单+表格的练习
m0_57519583的博客
02-27 288
html表单+表格的小练习
HTML综合练习题一公开课.docx
12-18
本资源摘要信息涵盖了 HTML 综合练习题的一些知识点，包括 HTML 基础知识、表格和表单、超链接、图像、背景和样式等。 选择题 1. 在下列标记中，不是双标记的是（ ） Answer: C、 解释： 是一个单标记，...
html网页综合项目实战
12-07
index2.html和index3.html可能是对基本HTML结构的扩展或修改，可能涉及更复杂的布局、表格（）、列表（, , ）、表单（）以及交互元素，如按钮（）和输入框（）。这些元素和标签的使用，让网页具备了更多功能和交互性...
html综合练习.zip
12-24
"html综合练习"可能是一个更进阶的练习，它可能涉及到表格（`<table>`）、列表（`<ul>`和`<ol>`）、表单（`<form>`）、输入元素（`<input>`）、样式控制（`<style>`或外部CSS文件）以及布局技术，比如使用`<div>`...
html综合练习.
12-21
本压缩包“html综合练习”是专为初学者设计的一系列实践教程，旨在帮助他们快速上手并熟练掌握HTML的基本概念和语法。 在HTML中，我们主要关注以下几个核心知识点： 1. **HTML基本结构**：每个HTML文档都由`<!...
Html.rar_表格网页
09-21
二、HTML表单 1. 表单基础：表单由`<form>`标签定义，常用属性包括`action`指定提交地址，`method`定义提交方式（GET或POST）。 2. 输入元素：表单包含多种输入元素，如`<input>`（文本、密码、复选框、单选按钮等）...
HTML--表单（form)与表格(table)的组合练习（一）（二）
weixin_45729253的博客
04-20 1347
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单与表格的组合使用1...
HTML 表格及练习
最新发布
weixin_51559599的博客
10-17 950
表格是一种二维结构，横行纵列。由单元格组成。表格是一种非常“强” 的结构：每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高基本结构
纯html的form表单实操练习
m0_64336780的博客
04-05 9178
纯html的form表单实操练习
【前端作业系列】HTML基础点 ， 训练表格（2022年6月17日作业）
08-13 853
【前端作业系列】HTML基础点 ， 训练表格（2022年6月17日作业）
表格练习HTML5
LaoXieyyds的博客
07-19 525
个人简历表格建立
初步认识HTML+表单标签练习
weixin_64449292的博客
07-25 598
适合初学者，内容比较基础。学好表单标签非常重要。
JavaScript网页计算器
qq_34416191的博客
07-14 3296
该计算器是用DW写的！ HTML篇 计算器 > C ← ± ＋ 7 8 9 － 4 5 6 × 1
HTML初学者指南：使用notepad++创建表格与表单
"该资源是一个关于HTML表格表单的PPT教程，适合前端初学者，内容涵盖HTML基础知识、CSS基础、以及如何使用编辑器notepad++进行HTML代码编写。通过学习，你可以掌握创建课程表、调查问卷等网页元素的方法。教程强调了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值