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
    评论
专栏目录
Day02 HTML制作表格以及练习
Libe2ty的博客
10-20 860
HTML 制作表格 table标签：表格标签 tr标签：表格中的行 th标签:表格的表头 默认居中 td标签：表格单元格 默认左并齐 cellpadding="数字"填充外边框 cellspacing=“数字” 填充表格间距 bgcolor 背景颜色 align 水平调节位置 valign 竖直调节距离 colspan=“合并单元格数” 跨列(行) 填充单元格 columnspan rowspan=“合并单元格数” 跨行(列) 填充单元格 rowspan 快捷添加x行y列个单元格:table>tr
表单处理之综合练习
weixin_33973609的博客
09-11 88
实现功能界面如下:实现代码(index.html文件):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .edit-mode{ ...
HTML中设置出生日期年月日下拉列表框及默认年月日
2301_77721393的博客
04-19 9844
哪一日年数年数月份月份
HTML 表格及练习
最新发布
weixin_51559599的博客
10-17 946
表格是一种二维结构，横行纵列。由单元格组成。表格是一种非常“强” 的结构：每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高基本结构
HTML表格习题练习
qq_50589028的博客
02-20 2323
文章目录一、会议日程安排表二、课程表设计 一、会议日程安排表 <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <h3 align="center">设置单元格跨列、跨行属性</h3> <center><table border="1" bordercolor="#3366ff"> <capt
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简介和标签练习（一）
haha的博客
03-11 513
HTML简介和常见的文本标签练习
html表单练习
kylinxjd的博客
05-09 4470
模拟阿里巴巴注册界面写一个注册表单，分企业和个人两个部分 个人注册 企业注册 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
HTML练习——表格
villaaaaaaaa
09-23 9387
1.建立如图所示表格 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt;
html表单表格小练习两个
mrgaohaihang的博客
03-19 1016
编写实现如图所示页面效果的HTML代码并提交。其中，A、 B、C、D、E加粗显示，它们都位于各自单元格的正中间，A单元格的高度为200像素，宽度为100像素，B单元格的高度为100像素，宽度为200像素，C单元格的宽度为100像素，高度为200像素。（在浏览器中展示时表格居中 这里注意colspan与rowspan的用法 colspan是横跨列rowspan是横跨行 width=300这里指3...
html练习
从入门到放弃系列
03-12 1万+
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt; &amp
html-css练习题 (注册表单)
采菊东篱下，Python满乾坤！
09-02 2752
代码赏析：     lang="en">     charset="UTF-8">   name="viewport" content="width=device-width, initial-scale=1.0">   http-equiv="X-UA-Compatible" conten
HTML中table表单练习
wyqwilliam的博客
12-06 636
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简历书写</title> </head> <body> <h5>近期非常热门的个人简历模板</h5> <table border=...
HBuider的使用之表单和表格的制作
热门推荐
qq_42804234的博客
07-28 2万+
HBuider的使用之表单表格的制作 最外层是表格的格式： &lt;table border="1px" bordercolor="#00FFFF" width="500xp" height="300px" cellpadding="5" cellspacing="0"&gt;&lt;!--描述：对表格边框样式的设计--&gt; &lt;/t
表格+表单练习
Achak的博客
07-08 71
表格+表单练习
html表格表单.pptx
11-20
"该资源是一个关于HTML表格表单的PPT教程，适合前端初学者，内容涵盖HTML基础知识、CSS基础、以及如何使用编辑器notepad++进行HTML代码编写。通过学习，你可以掌握创建课程表、调查问卷等网页元素的方法。教程强调了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值