Html--表单练习

最新推荐文章于 2023-02-15 17:00:29 发布
最新推荐文章于 2023-02-15 17:00:29 发布
阅读量98 收藏
点赞数
文章标签： javascript 移动开发 数据库 ViewUI
原文链接：http://www.cnblogs.com/hao-1234-1234/p/6188715.html
版权
  
 <!--文档定义一定要带上，因为浏览器在解析的时候先按照文档定义的格式解析，
 如果没有就按照浏览器默认的格式解析，可能会出问题。-->
 <html>
 <head>  <!--标签头-->
 <title>b标签练习1</title> <!--标题-->
 </head>
 <body> <!--标签体-->
  
  
  
 <!--Test1-->
     <ol><!--有序标签-->
             <li>爱</li>
             <li>青苹果乐园</li>
             <li>蝴蝶效应</li>
             <li>芙蓉姐夫</li>
             <li>水煮鱼</li>
         </ol>
 <!--Test2-->       
         <ul><!--无序标签-->
             <li>爱</li>
             <li>青苹果乐园</li>
             <li>蝴蝶效应</li>
             <li>芙蓉姐夫</li>
             <li>水煮鱼</li>
         </ul>
  
 <!--Test3-->
     <ul type="A"><!--类型：square 1 a -->
             <li>爱</li>
             <li>青苹果乐园</li>
             <li>蝴蝶效应</li>
             <li>芙蓉姐夫</li>
             <li>水煮鱼</li>
         </ul>
  
 <!--Test4表格-->
     <table border="1" height="200" width="450"><!--table表格标签--> <!--border最外层边框宽度--><!--height：高度 width:宽度-->
         <tr align=center ><!--tr行标签,align对齐方式，center居中-->
            
             <td><strong>姓名</strong></td> <!--td列标签-->
            <td><strong>性别</strong></td>
             <td><strong>工资</strong></td>
            
         </tr>
         <tr>
             <td>张三</td>
             <td>男</td>
             <td>10000</td>
         </tr>
         <tr>
             <td>李四</td>
             <td>男</td>
             <td>10000</td>
            
         </tr>
         <tr>
             <td>王五</td>
             <td>男</td>
             <td>10002</td>
            
         </tr>
           <tr>
             <td>舒翠</td>
             <td>女</td>
             <td>15000</td>
         </tr>
      
     </table>
  
     <!--cellpadding(填充)：用来统一设置表格中每个单元格的填充大小；
        cellspacing(间距)：用来统一设置表格中每个单元格与单元格之间的间距-->
 <!--Test4-2表格-->
     <table border="1" cellpadding="30">
         <tr ><!--行标签--> 
             <td>姓名</td>
            <td>性别</td>
             <td>工资</td>
         </tr>
         <table />
 <!--Test4-3表格-->
         <table border="1" cellspacing="30">
         <tr ><!--行标签-->
            
             <td>姓名</td>
            <td>性别</td>
             <td>工资</td>
            
         </tr>
         <table />
  
  
 <!--Text4-4表头表尾-->
     <table border="1" >
     <thead><!--thead表头自动加粗、居中--注意改为；th-->
      <tr>
             <th>姓名</th>
            <th>性别</th>
             <th>工资</th>
            
         </tr>
     </thead>
       
         <tr>
             <td>张三</td>
             <td>男</td>
             <td>10000</td>
         </tr>
         <tr>
             <td>李四</td>
             <td>男</td>
             <td>10000</td>
            
         </tr>
         <tr>
             <td>王五</td>
             <td>男</td>
             <td>10002</td>
            
         </tr>
            <tfoot><!--thead表头自动加粗、居中--注意改为；th-->
               <tr>
                 <th>舒翠</th>
                 <th>女</th>
                 <th>15000</th>
             </tr>
         </tfoot>
     </table>
  
  
       <!-- 水平对齐方式：align :left\center\right
       垂直对齐方式：valign:top\middle\bottom-->
 <!--Test5表格-->
          <table border="1" height="175" width="400">
         <caption>这是一个表格</caption><!--说明-->
             <tr>
                 <td align=center colspan="3"><b>学生基本情况</b></td><!--rowspan合并行 colspan合并列-->
             </tr>
             <tr align=center>
                 <td><strong>姓名</strong></td>
                 <td><strong>性别</strong></td>
                 <td><strong>专业</strong></td>
             </tr>
             <tr>
                 <td>刘备</td>
                 <td>男</td>
                 <td rowspan="3">计算机</td>
                 </tr>
             <tr>
                  <td>张飞</td>
                  <td>男</td>
             </tr>
             <tr>
                  <td>诸葛亮</td>
                  <td></td>
             </tr>
  
  
          </table>
 </body>
 </html>

 

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <!--知识点1-->
     <!--<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、
     <textarea>、<select>等表单元素放到form中
    <input>是主要的表单元素，type的可选值：submit(提交按钮)、button（普通按钮）
     checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）
     password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）
     <input type="file"/>-->
 <!--知识点2-->
     <!--id属性的目的主要是为了客户端，可以通过javascript语言来操作某个元素。
     所有元素都可以有id，并且每个元素的id不可以重复。
     --name属性的目的是为了将数据提交到服务器。
     只有表单元素才可以有name，并且name是可以重复的。
     表单提交其实就是提交的表单元素的value中的内容，用户输入的值自动就到value中了-->
  
    
 <html>
 <head>
 <title>表单</title>
 </head>
 <body>
         <form action="http://www.baidu.com/a.aspx" method="get"><!--action(提交)处理,get post一种提交方法-->
         <table border="1"><!--border边框粗细-->
                 <tr>
                     <td>姓名：</td>
                     <td><input name="txtName" type="text" value="王小明"/></td> <!--name可以做自由命名，type有一定类型，有点像窗体控件-->
                 </tr>
                   <tr>
                     <td>邮箱：</td>
                     <td><input name="txtEmail" type="text" value="sfjslf@qq.com"/></td>
                 </tr>
                    <tr>
                     <td>密码：</td>
                     <td><input name="txtPassword" type="password"/></td>
                 </tr>
                    <tr>
                     <td>确认密码：</td>
                     <td><input name="txtConfirmPassword" type="password"/></td>
                 </tr>
                  <tr>
                     <td>性别：</td>
                     <td><input type="radio" name="gender" value="male">男
                     <input type="radio" name="gender" value="female" />女</td>
                  </tr>
                  <tr>
                     <td>兴趣爱好：</td>
                     <td>
                     <input name="hobby" type="checkbox"  value="1"/> 篮球
                      <input name="hobby" type="checkbox"  value="2"/>跑步
                       <input name="hobby" type="checkbox"  value="3"/>看书看报
                        <input name="hobby" type="checkbox"  value="4"/>吃东西
                         <input name="hobby" type="checkbox"  value="5"/>旅游
                     </td>
                  </tr>
                  <tr>
                     <td>所在地区：</td>
                     <td>
                         省：
                         <select name="province" multiple="multiple" size="4"> <!--创建带有 4 个选项的选择列表-->
                             <option value="1">黑龙江</option>
                             <option value="2">吉林</option>
                             <option value="3">武汉</option>
                             <option value="11">襄阳</option>
                               <option value="1">黑龙江</option>
                             <option value="2">吉林</option>
                             <option value="3">武汉</option>
                             <option value="11">襄阳</option>
                         </select>
                         市：
                         <select>
                            <optgroup label="襄阳">
                             <option value="101">宜城</option>
                             <option value="102">枣阳</option>
                             <option value="103">老河口</option>
                             <option value="104">谷城</option>
                             <option value="105">南漳</option>
                            <optgroup label="武汉">
                            <option value="121"武昌区</option>
                             <option value="122">汉阳区</option>
                             <option value="123">汉口</option>
                             <option value="124">江夏区(05）</option>
                             <option value="125">洪山区(06)</option>
                            </optgroup>
                            
                         </select>
                     </td>
                  </tr>
  
                    <tr>
                    
                     <td colspan="2" style="heght:80px;">
                     <fieldset style="height:50px;"><!--<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。-->
                    <legend>请选择你感兴趣的内容：</legend>  <!--组合表单中的相关元素-->
                     <input name="hobby" type="checkbox"  value="1"/> 数据库
                      <input name="hobby" type="checkbox"  value="2"/>网络
                       <input name="hobby" type="checkbox"  value="3"/>web开发
                        <input name="hobby" type="checkbox"  value="4"/>移动开发
                     </fieldset>
                
      
                     </td>
  
             </table>
           
  
         </form>
 </body>
  
 </html>

 

详细知识点：www.w3cschool 、菜鸟教程

转载于:https://www.cnblogs.com/hao-1234-1234/p/6188715.html

weixin_30600503
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
form.html（表单练习）
07-22
表单练习，账号text，密码password，性别单选框radio，爱好多选框checkbox，地址下拉列表select，文本域textarea，提交按钮submit
纯html的form表单实操练习
m0_64336780的博客
04-05 9169
纯html的form表单实操练习
html表单选择题,html表格表单练习题.doc
weixin_39785422的博客
06-03 1778
html表格表单练习题精品文档2016全新精品资料-全新公文范文-全程指导写作 –独家原创 PAGE1 / NUMPAGES1 html表格表单练习题 一、HTML制作表格练习请用最简洁的HTML代码完成上述效果，调试成功后，把源码复制在下面。二、实验七 表格一、实验目的在文档中，表格更显直观，...
HTML基础表单练习----用户登录界面
qq_45626589的博客
02-07 2148
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单练习</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/> </head> <body> <div class="container"> &lt.
HTMl表单的练习
qq_48496840的博客
02-15 150
简单的表单练习
前端练习01-前端-HTML
03-24
本练习集“前端练习01-前端-HTML”旨在帮助初学者或有一定基础的学习者深入理解并熟练掌握HTML的基本概念、结构以及应用。 HTML是一种标记语言，它通过一系列预定义的标签来描述网页内容和结构，如标题、段落、图像...
Questionnaire:练习HTML表单
03-14
在"Questionnaire:练习HTML表单"这个主题中，我们将深入探讨HTML表单的使用，它是网页交互性的重要组成部分，允许用户输入数据并与服务器进行通信。 HTML表单由一系列的表单元素组成，如`<form>`、`<input>`、`...
HTML-Restaurante:DigitalHouse HTMLCSS练习
05-28
HTML-Restaurante是针对初学者的一个练习项目，旨在帮助学习者掌握HTML和CSS的基本概念和技术。这个项目可能由DigitalHouse提供，一个知名的在线教育机构，专注于数字技能的培训。在"HTML-Restaurante"中，你将有...
html-css网站：首次练习网站
02-09
在"html-cssWebsite-master"中，我们可能会看到这些基本标签的使用，以及更复杂的元素如表格、列表、表单等。 CSS，则是用来描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言。通过CSS，我们可以控制...
html表单练习
weixin_45239190的博客
08-06 2616
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2514
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
实训篇-Html-表单练习
gy77
01-07 407
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Regist</title> </head> <body> <h3 align="center">注册页面</h3> <...
html表单的练习
lyn789的博客
08-24 831
一个表单的练习， 这是在网页显示中的展示。 form.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
web前端入门到实战：HTML表单练习
软件开发-前端开发-IT
09-27 918
整理一下思路​： 首先练习了账号密码的输入，属性为text为文本框，属性为password的为暗文文本框输入​ 第二，单选框输入属性为radio，默认选择选项checked属性为checked，不同选项之间互斥为name属性的值必须相等​。多选框输入属性为checkbox。 第三，输入框为textarea标签，里面rows属性定义最多行，cols属性定义最多列​。 第四，属性值为date代表日历，...
HTML表单小练习
longting_的博客
05-20 1468
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
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练习——表格
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;
html5简单的表单练习
xiaoblank的博客
09-01 1963
注册新用户 用户名: 密码: ...
HTML 表单的练习记录篇
追求，成长
12-26 4062
前言： 近期的工作中是负责公司网站的维护，所以就得学习Web前端的知识…时常忘记，所以记录下，也算是学习Web的一个开篇吧！废话不多说，coding … Ⅰ.简述表单相关的标签：form、fieldset、legend、table、tr、td、input、select、option、textarea 等；表单相关标签对应的部分属性： 标签 元素
html表单案例练习
最新发布
09-28
以下是一个HTML表单案例练习： ```html <form action="/submit" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <label for="email...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值