表格表单总结

Posted 2020-06-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格表单总结相关的知识，希望对你有一定的参考价值。

html表格
table

   <table>标签表示这是一个表格，构成元素有<tr>、<td>、<th>

HTML表单

**form**   
   
      <form>标签表示这是一个表单，它的属性有action、
      method,action表示提交到的地址，
       method表示提交的方式，有post和get

**input**
   
   <input>标签表示输入控件，它的属性有type,type的有： 
   text 表示文本框
   radio 表示单选框
   checkbox 表示复选框
   submit 表示提交按钮
   reset 表示重置按钮
   button 表示按钮，它也是一个标签
   file 文件上传控件
   hidden 隐藏字段
   color 颜色
   email 邮件
   date 日期
   number 数字
   ......

**button**
   
   <button>按钮</button>
   在button元素内部，可以放置内容。比如图像、文本。

**label**

   <label for ="相关标记的id">
   <label for="male">Male</label>
   <input type="radio" name="sex" id="male" />    
   <br />
   <label for="female">Female</label>
   <input type="radio" name="sex" id="female" />
   点击这里的文字就可以让单选框选中。

**texterea**

   <texterea>这是一个多行文本域标签</texterea>
   可以设置它的行 rows 列cols


**radio**

   <input type="radio"/>这是一个单选框.


**checkbox**
   
   <input type="checkbox" checked="checked"/>
   这是一个复选框,当checked="checked"时
   该选项被默认选中。

**select**

   <select>这是一个下拉列表</select>
   <select>
      <option value ="volvo">Volvo</option>
      <option value ="saab" selected="selected">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
   </select>
   当selected="selected"时表示这是默认选中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩表</title>
    <style>
        .biaoti{
            color: mediumvioletred;font-size: 50px;
            background-color:deeppink; padding: 20px;

        }
        #biaoti{
            color: black;
        }
    </style>
    <style type="text/css">
        p{font-family:sans-serif;font-size: 30px;
            background-color:deeppink;}
        .hang{font-family:sans-serif;font-size: 30px;
            background-color:deeppink;}

    </style>
</head>
<body >
<table border="4" align="center" cellpadding="60">
    <caption class="biaoti"><strong id="biaoti">二年级3班学生成绩表</strong></caption>
    <tr class="hang">
        <td colspan="4"><strong>姓名</strong></td>
        <td colspan="4"><strong>语文</strong></td>
        <td colspan="4"><strong>英语</strong></td>
        <td colspan="4"><strong>化学</strong></td>
        <td colspan="4"><strong>英语</strong></td>
    </tr>

    <tr>
        <td colspan="4"><strong>小明</strong></td>
        <td colspan="4">56</td>
        <td colspan="4">56</td>
        <td colspan="4">99</td>
        <td colspan="4">100</td>
    </tr>
    <tr>
        <td colspan="4"><strong>小红</strong></td>
        <td colspan="4">99</td>
        <td colspan="4">99</td>
        <td colspan="4">99</td>
        <td colspan="4">92</td>
    </tr>
    <tr>
        <td colspan="4"><strong>小白</strong></td>
        <td colspan="4">88</td>
        <td colspan="4">84</td>
        <td colspan="4">96</td>
        <td colspan="4">99</td>
    </tr>
</table>
<p>这是一个字体</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为表格添加边框</title>
    <style>
        #biao-1{
            font-size: 100%;
            background-color: aqua;
        }
        body{background-color: aqua;}
        .suojin{text-indent: 3em; text-align: center; }

    </style>
</head>
<body>
    <p><strong>1.表格标签table</strong></p>
<table border="4" align="center" cellpadding="60" dotted #000;

>
    <caption id="biao-1"><strong>二年级学生成绩表</strong></caption>
    <tr>
        <td colspan="4"><strong>姓名</strong></td>
        <td colspan="4"><strong>语文</strong></td>
        <td colspan="4"><strong>英语</strong></td>
        <td colspan="4"><strong>化学</strong></td>
        <td colspan="4"><strong>英语</strong></td>
    </tr>

    <tr>
        <td colspan="4"><strong>小明</strong></td>
        <td colspan="4">56</td>
        <td colspan="4">56</td>
        <td colspan="4">99</td>
        <td colspan="4">100</td>
    </tr>
    <tr>
        <td colspan="4"><strong>小红</strong></td>
        <td colspan="4">99</td>
        <td colspan="4">99</td>
        <td colspan="4">99</td>
        <td colspan="4">92</td>
    </tr>
    <tr>
        <td colspan="4"><strong>小白</strong></td>
        <td colspan="4">88</td>
        <td colspan="4">84</td>
        <td colspan="4">96</td>
        <td colspan="4">99</td>
    </tr>
</table>
    <br>
    <ol>
        <li><a href="#"Title="优秀同学">优秀同学</a> </li>
        <li><a href="#"Title="优秀同学">优秀同学</a> </li>
        <li><a href="#"Title="优秀同学">优秀同学</a> </li>
    </ol>
    <br>
    <br>
    <p><strong>2.表单标签form</strong></p>
    <form method="post" action="#">
        用户：
        <div><input type="text" name="FirstName"></div>
        <br>
        密码：
        <div><input type="password" name="password"></div>
        <br>
        <div>
        <p><strong>3.创建一个单选按钮</strong></p>
        男性：
        <input type="radio" checked="checked" name="sex" value="male"/>
        <br>
        女性：
        <input type="radio" name="Sex" value="female" />
        <br>
        </div>
        <div>
        <p><strong>4.创建一个复选框</strong></p>
        <p>你对那些运动感兴趣？</p>
        <input type="checkbox" name="checkbox1" value="跑步"/>跑步
        <input type="checkbox" name="checkbox2" value="羽毛球" checked="checked"/>羽毛球
        <input type="checkbox" name="checkbox3" value="游泳" checked="checked"/>游泳
        </div>
    <p><strong>5.创建一个文本域</strong></p>
        <label >个人简介：</label>
        <textarea name="" id="" cols="30" rows="10">输入内容：</textarea><br><br>
        <input type="submit" value="提交" name="提交"/>
        <input type="reset" value="重置" name="重置"/><br>
        <p><strong>6.创建一个下拉列表</strong></p>
        <label>水果：</label>
        <select>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="车厘子">车厘子</option>
            <option value="榴莲" selected="selected">榴莲</option>
        </select>
        <p>7.创建一个按钮</p>
        <input type="button" value="Hello world!">
    </form>
    <ul style="list-style-type: none">
        <li>去掉小圆点</li>
    </ul>
<p class="suojin">设置文本首行缩进</p>
</body>
</html>

以上是关于表格表单总结的主要内容，如果未能解决你的问题，请参考以下文章

表格表单总结

表格表单相关标签的简单介绍我的总结

Laravel：如何在控制器的几种方法中重用代码片段

课题实践总结

android片段表格布局

如何在html的表格中加入边框线

表格 表单总结

表格表单总结