• 售前

  • 售后

热门帖子
入门百科

html form表单根本入门案例讲解

[复制链接]
永远就三年疗 显示全部楼层 发表于 2021-8-16 11:36:25 |阅读模式 打印 上一主题 下一主题
目次


  • 一,表格标签

    • –1,概述
    • –2,总结

  • 二,表单标签

    • –1,测试
    • –2,总结
    • –3,form提交数据

  • 三,form表单的练习
  • 四,CSS

    • -1,概述
    • -2,语法
    • -3,入门案例

  • 五,选择器
  • 总结

一,表格标签

向网页中加入表格

–1,概述
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>测试 表格标签</title>
  6.         </head>
  7.         <body>
  8.                 <!-- 展示一个3行3列的表格 -->
  9. <!-- table是表格标签,bgcolor设置背景色 width是表格的宽度 border是表格的边框 cellspacing是单个元的间距  -->
  10.                 <table bgcolor="pink" width="300px" border="1px" cellspacing="0">
  11.                         <tr> <!-- tr是表里的行 -->
  12.                                 <td colspan="2">11</td> <!-- colspan合并列 -->
  13.                                 <td>13</td><!-- td是行里的列 -->
  14.                         </tr>
  15.                         <tr>
  16.                                 <td>21</td>
  17.                                 <td>22</td>
  18.                                 <td rowspan="2">23</td>  <!-- colspan合并行-->
  19.                         </tr>
  20.                         <tr>
  21.                                 <td>31</td>
  22.                                 <td>32</td>
  23.                         </tr>
  24.                 </table>
  25.         </body>
  26. </html>
复制代码

–2,总结
  1. table
复制代码
标签用来表现表格
  1. tr
复制代码
标签表现表里的一行
  1. td
复制代码
标签表现行里的列
  1. border
复制代码
设置边框
  1. cellspacing
复制代码
设置单元格的间距
  1. bgcolor
复制代码
设置配景致
  1. width
复制代码
设置宽度
  1. height
复制代码
设置高度
  1. colspan
复制代码
合并列
  1. rowspan
复制代码
合并行

二,表单标签

用来提交数据,本质上就是在一个表格标签的外貌用form包起来


–1,测试
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>测试 表单标签</title>
  6.         </head>
  7.         <body>
  8.                 <form>
  9.                         <table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
  10.                                 <tr>
  11.                                         <td colspan="2">
  12.                                                 <h1 align="center">注册表单</h1>
  13.                                         </td>
  14.                                 </tr>
  15.                                 <tr>
  16.                                         <td>用户名:</td>
  17.                                         <td>
  18.                                                 <input type="text" />
  19.                                         </td>
  20.                                 </tr>
  21.                                 <tr>
  22.                                         <td>密码:</td>
  23.                                         <td>
  24.                                                 <input type="password" />
  25.                                         </td>
  26.                                 </tr>
  27.                                 <tr>
  28.                                         <td>确认密码:</td>
  29.                                         <td>
  30.                                                 <input type="password" />
  31.                                         </td>
  32.                                 </tr>
  33.                                 <tr>
  34.                                         <td>昵称:</td>
  35.                                         <td>
  36.                                                 <input type="text" />
  37.                                         </td>
  38.                                 </tr>
  39.                                 <tr>
  40.                                         <td>邮箱:</td>
  41.                                         <td>
  42.                                                 <input type="email" />
  43.                                         </td>
  44.                                 </tr>
  45.                                 <tr>
  46.                                         <td>性别:</td>
  47.                                         <td>
  48.                                                 <input type="radio" />男
  49.                                                 <input type="radio" />女
  50.                                         </td>
  51.                                 </tr>
  52.                                 <tr>
  53.                                         <td>爱好:</td>
  54.                                         <td>
  55.                                                 <input type="checkbox" />篮球
  56.                                                 <input type="checkbox" />足球
  57.                                                 <input type="checkbox" />乒球
  58.                                         </td>
  59.                                 </tr>
  60.                                 <tr>
  61.                                         <td>城市:</td>
  62.                                         <td>
  63.                                                 <select>
  64.                                                         <option>北京</option>
  65.                                                         <option>上海</option>
  66.                                                         <option>山东</option>
  67.                                                         <option>东北</option>
  68.                                                 </select>
  69.                                         </td>
  70.                                 </tr>
  71.                                 <tr>
  72.                                         <td>头像:</td>
  73.                                         <td>
  74.                                                 <input type="file" />
  75.                                         </td>
  76.                                 </tr>
  77.                                 <tr>
  78.                                         <td>验证码:</td>
  79.                                         <td>
  80.                                                 <input type="text" />
  81.                                                 <img src="a.png">
  82.                                                 <input type="button" value="点我换一张" />
  83.                                         </td>
  84.                                 </tr>
  85.                                 <tr>
  86.                                         <td>自我描述:</td>
  87.                                         <td>
  88.                                                 <textarea>请输入自我描述~~</textarea>
  89.                                         </td>
  90.                                 </tr>
  91.                                 <tr>
  92.                                         <td colspan="2" align="center">
  93.                                                 <input type="submit" value="提交"/>
  94.                                                 <input type="button" value="重置"/>
  95.                                         </td>
  96.                                 </tr>
  97.                         </table>
  98.                 </form>
  99.         </body>
  100. </html>
复制代码
–2,总结
  1. form
复制代码
标签用来提交表单里的数据
  1. table
复制代码
标签用来实现表格
  1. tr
复制代码
标签用来表现表格里的行
  1. td
复制代码
标签表现行里的列
  1. img
复制代码
标签表现插入图片
  1. select
复制代码
标签表现下拉框,option是下拉选项
  1. textarea
复制代码
标签是文本域
  1. input
复制代码
表现输入框,范例很丰富
  1. text
复制代码
范例是平凡的文本输入框
  1. password
复制代码
是暗码输入框
  1. email
复制代码
是邮箱的输入框
  1. file
复制代码
是上传文件
  1. radio
复制代码
是单选框
  1. checkbox
复制代码
是多选框
  1. button
复制代码
是平凡的按钮
  1. submit
复制代码
是提交按钮,比button多了数据提交的功能
  1. align
复制代码
属性用来设置元素的位置center是居中
  1. bordercolor
复制代码
设置边框的颜色

–3,form提交数据

–1,提交按钮必须submit范例,否则不会提交数据的
–2,哪些数据须要提交的话,必须在网页上设置name属性
–3,提交的数据都在地址栏中展示 http://127.0.0.1:8848/cgb2105/html4.html?username=1314
username=1314 ,其中username是页面中name属性的值,1314是网页中输入的数据
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>测试 表单标签</title>
  6.         </head>
  7.         <body>
  8.                 <!-- 默认会把数据在地址栏中拼接,,,,,GET方式提交数据
  9.                         http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2
  10.                         GET方式提交数据:好处是展示的效果明确,坏处是不安全,地址栏太长
  11.                         POST方式提交数据:好处是安全对数据的大小没上线,坏处是看不见数据
  12.                 -->
  13.                 <form method="post" action="http://www.baidu.com">
  14.                         <table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
  15.                                 <tr>
  16.                                         <td colspan="2">
  17.                                                 <h1 align="center">注册表单</h1>
  18.                                         </td>
  19.                                 </tr>
  20.                                 <tr>
  21.                                         <td>用户名:</td>
  22.                                         <td>
  23.                                                 <input type="text" name="username"/>
  24.                                         </td>
  25.                                 </tr>
  26.                                 <tr>
  27.                                         <td>密码:</td>
  28.                                         <td>
  29.                                                 <input type="password" name="pwd"/>
  30.                                         </td>
  31.                                 </tr>
  32.                                 <tr>
  33.                                         <td>确认密码:</td>
  34.                                         <td>
  35.                                                 <input type="password" name="repwd" />
  36.                                         </td>
  37.                                 </tr>
  38.                                 <tr>
  39.                                         <td>昵称:</td>
  40.                                         <td>
  41.                                                 <input type="text"  name="nick"/>
  42.                                         </td>
  43.                                 </tr>
  44.                                 <tr>
  45.                                         <td>邮箱:</td>
  46.                                         <td>
  47.                                                 <input type="email" name="mail" />
  48.                                         </td>
  49.                                 </tr>
  50.                                 <tr>
  51.                                         <td>性别:</td>
  52.                                         <td>
  53.                                                 <!-- radio是单选,拥有相同的name值才能实现单选,不然就是双选了
  54.                                                                 必须设置value属性,否则永远提交on
  55.                                                 -->
  56.                                                 <input type="radio"  name="sex" value="1"/>男
  57.                                                 <input type="radio"  name="sex" value="0"/>女
  58.                                         </td>
  59.                                 </tr>
  60.                                 <tr>
  61.                                         <td>爱好:</td>
  62.                                         <td>
  63.                                                 <!-- 拥有相同的name值,必须设置value属性否则提交的是on -->
  64.                                                 <input type="checkbox"  name="like" value="1"/>篮球
  65.                                                 <input type="checkbox"  name="like" value="2"/>足球
  66.                                                 <input type="checkbox"  name="like" value="3"/>乒乒球
  67.                                         </td>
  68.                                 </tr>
  69.                                 <tr>
  70.                                         <td>城市:</td>
  71.                                         <td>
  72.                                                 <!-- 配置value属性,否则提交的是汉字,网络传输时字符串没有数字快 -->
  73.                                                 <select name="city">
  74.                                                         <option value="1">北京</option>
  75.                                                         <option value="2">上海</option>
  76.                                                         <option value="3">山东</option>
  77.                                                         <option value="4">东北</option>
  78.                                                 </select>
  79.                                         </td>
  80.                                 </tr>
  81.                                 <tr>
  82.                                         <td>头像:</td>
  83.                                         <td>
  84.                                                 <input type="file" name="head"/>
  85.                                         </td>
  86.                                 </tr>
  87.                                 <tr>
  88.                                         <td>验证码:</td>
  89.                                         <td>
  90.                                                 <input type="text"  name="code" />
  91.                                                 <img src="a.png">
  92.                                                 <input type="button" value="点我换一张" />
  93.                                         </td>
  94.                                 </tr>
  95.                                 <tr>
  96.                                         <td>自我描述:</td>
  97.                                         <td>
  98.                                                 <textarea>请输入自我描述~~</textarea>
  99.                                         </td>
  100.                                 </tr>
  101.                                 <tr>
  102.                                         <td colspan="2" align="center">
  103.                                                 <input type="submit" value="提交"/>
  104.                                                 <input type="button" value="重置"/>
  105.                                         </td>
  106.                                 </tr>
  107.                         </table>
  108.                 </form>
  109.         </body>
  110. </html>
复制代码
三,form表单的练习

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>练习form表单</title>
  6.         </head>
  7.         <body>
  8.                 <!-- 默认的数据提交是get方式 -->
  9.                 <form>
  10.                         <table>
  11.                                 <tr>
  12.                                         <td>
  13.                                                 <h3>学生信息管理系统MIS</h3>
  14.                                         </td>
  15.                                 </tr>
  16.                                 <tr>
  17.                                         <td>
  18.                                                 姓名:
  19.                                         </td>
  20.                                 </tr>
  21.                                 <tr>
  22.                                         <td>
  23.                                                 <input type="text" placeholder="请输入姓名" name="user" />
  24.                                         </td>
  25.                                 </tr>
  26.                                 <tr>
  27.                                         <td>
  28.                                                 年龄:
  29.                                         </td>
  30.                                 </tr>
  31.                                 <tr>
  32.                                         <td>
  33.                                                 <input type="number" placeholder="请输入年龄" name="age" />
  34.                                         </td>
  35.                                 </tr>
  36.                                 <tr>
  37.                                         <td>
  38.                                                 性别:(单选框)
  39.                                                 <input type="radio" name="sex" value="1"/>男
  40.                                                 <input type="radio" name="sex" value="0"/>女
  41.                                         </td>
  42.                                 </tr>
  43.                                 <tr>
  44.                                         <td>
  45.                                                 爱好:(多选)
  46.                                                 <input type="checkbox" name="like" value="1"/>乒乓球
  47.                                                 <input type="checkbox" name="like" value="2"/>爬山
  48.                                                 <input type="checkbox" name="like" value="3"/>唱歌
  49.                                         </td>
  50.                                 </tr>
  51.                                 <tr>
  52.                                         <td>
  53.                                                 学历:(下拉框)
  54.                                                 <select name="edu">
  55.                                                         <option value="1">本科</option>
  56.                                                         <option value="2">专科</option>
  57.                                                         <option value="3">高中</option>
  58.                                                         <option value="4">小学</option>
  59.                                                 </select>
  60.                                         </td>
  61.                                 </tr>
  62.                                 <tr>
  63.                                         <td>
  64.                                                 入学日期: <br/>
  65.                                                 <input type="date" name="time"/>
  66.                                         </td>
  67.                                 </tr>
  68.                                 <tr>
  69.                                         <td>
  70.                                                 <input type="submit" value="保存" />
  71.                                                 <input type="button" value="取消" />
  72.                                         </td>
  73.                                 </tr>
  74.                         </table>
  75.                 </form>
  76.         </body>
  77. </html>
复制代码
四,CSS


-1,概述
  1. 用来修饰网页的,变得好看。层叠样式表stylesheet
复制代码
-2,语法
  1. td{ text-align : center; } 选择器{ 属性名 : 属性值 ; }
复制代码
-3,入门案例
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>测试 css修饰网页</title>
  6.                 <!-- css写法2:内部css,插入css代码 -->
  7.                 <style>
  8.                         /* 语法:选择器{ 属性名:属性值; } */
  9.                         /* 给所有div */
  10.                         div{
  11.                                 color:green; /* 设置字的颜色红色 */
  12.                                 background-color: #008000;/* 设置背景色 */
  13.                         }
  14.                 </style>
  15.         </head>
  16.         <body>
  17.                 <!-- css写法1:行内css-->
  18.                 <div style="color: red;">我是div1</div>
  19.                 <div style="background-color: aquamarine;" >我是div2</div>
  20.                 <div style="color: red;">我是div3</div>
  21.                 <div>我是div4</div>
  22.                 <div>我是div5</div>
  23.         </body>
  24. </html>
复制代码
五,选择器
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>测试 css的选择器</title>
  6.                 <!-- style向HTML中嵌入css代码 -->
  7.                 <style>
  8.                         /* 1. 标签名选择器: */
  9.                                  /* 练习1:选中标签名叫div的所有元素*/
  10.                                  div{  
  11.                                         background-color: #008000; /* 设置背景色 */
  12.                                         color: black; /* 设置字的颜色*/
  13.                                         font-size: 30px ; /* 设置字号 */
  14.                                         font-family: "宋体" ; /* 设置字体 */
  15.                                 }
  16.                                 /* 练习2:选中标签名叫input的所有元素*/
  17.                                 input{
  18.                                         background-color: pink; /* 设置背景色 */
  19.                                 }
  20.                         /* 2. class选择器:先设置class属性 + 通过.获取class的值 */
  21.                                 .a{ /* 选中网页中所有class=a的元素们,其中class的值可以重复*/
  22.                                         color: yellow;/* 字的颜色 */
  23.                                 }
  24.                         /* 3. id选择器:先设置id属性 + 通过#获取id的值 */       
  25.                                 #x{ /* 选中网页中id=x的元素,由于id的值不能相同,所以只选中了一个元素*/
  26.                                         font-size: 100px; /* 加大字号 */
  27.                                 }
  28.                 </style>
  29.         </head>
  30.         <body>
  31.                 <!-- div span p input  -->
  32.                 <div class="a">我是div1</div>
  33.                 <div id="x">我是div2</div>
  34.                 <div id="y">我是div3</div>
  35.                 <span class="a">我是span1</span>
  36.                 <span>我是span2</span>
  37.                 <p class="a">我是p</p>
  38.                 <input type="text" placeholder="我是input1"></input>
  39.                 <input type="text" placeholder="我是input2"></input>
  40.         </body>
  41. </html>
复制代码
总结

本篇文章就到这里了,渴望能给你带来资助,也渴望您可以或许多多关注脚本之家的更多内容!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作