HTML表单与表格基础学习

一、表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本框-语法

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

密码框-语法

输入密码<input  type="password "  name="pass"  size="20" />

单选按钮-语法

<input name="sex" type="radio" value="男"/>男
<input name="sex" type="radio" value="女" />女

复选框-语法

<input type="checkbox" name="test" value="fruit"/>
<input type="checkbox" name="test" value="milk" checked/>
<input type="checkbox" name="test" value="noodles"/>

按钮-语法

<input type="reset" name="Reset"  value="reset">//重置按钮
<input type="submit" name="Submit" value="submit">//提交按钮
<input type="button" name="Button" value="button"/>//普通按钮

邮箱-语法

 自动判断是都符合邮箱格式 

<p>输入邮箱:<input type="email"  name="email"/></p>

表单可以进行初级验证

required

 规定文本框填写内容不能为空，否则不允许用户提交表单 

语法：

<input type="text" name="username"  required/>

pattern

 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

语法：

电话号码<input type="text" name="number"  required pattern="^1[358]\d{9}" />

二、表格

表格定义

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构；其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

单元格边框

表格边框：使用<table border="1"></table> 的方式来定义

设置了cellpadding和cellspacing可以使表格之间无间隙

<table border="1" cellpadding="0" cellspacing="0" style="margin: 0 auto;"  >

 

合并单元格

合并行使用：colspan="2"；合并列使用：rowspan="2"

合并数值可改变

单元格对齐（居中，左对齐，右对齐）

align="center"	align="left"	align="right"
居中	左对齐	右对齐

示例：

<h2 style="text-align: center;"> 小说排行榜</h2>
    <table border="1" cellpadding="0" cellspacing="0" style="width: 620px;height: 300px;margin: 0 auto;"  >
       <tr style="font-weight: bold; text-align: center;">
               <td>排名</td>
               <td>关键词</td>
               <td>趋势</td>
               <td>今日搜索</td>
               <td>最近七日</td>
               <td>相关链接</td>
            
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td style="color: red;">↑</td>
               <td>356</td>
               <td>3560</td>
               <td>
                   <a href="search.html">贴吧</a> <a href="article.html">图片</a> <a href="search.html">百科</a>
               </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td style="color: green;">↓</td>
               <td>356</td>
               <td>3560</td>
               <td>
                <a href="search.html">贴吧</a> <a href="article.html">图片</a> <a href="search.html">百科</a>
               </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td style="color: red;">↑</td>
               <td>356</td>
               <td>3560</td>
               <td>
                <a href="search.html">贴吧</a> <a href="article.html">图片</a> <a href="search.html">百科</a>
               </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
               <td>356</td>
               <td>3560</td>
               <td>
                <a href="search.html">贴吧</a> <a href="article.html">图片</a> <a href="search.html">百科</a>
               </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
               <td>356</td>
               <td>3560</td>
               <td>
                <a href="search.html">贴吧</a> <a href="article.html">图片</a> <a href="search.html">百科</a>
               </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
               <td>356</td>
               <td>3560</td>
               <td>
                <a href="search.html">贴吧</a> <a href="article.html">图片</a> <a href="search.html">百科</a>
               </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
               <td>356</td>
               <td>3560</td>
               <td>
                <a href="search.html">贴吧</a> <a href="article.html">图片</a> <a href="search.html">百科</a>
               </td>
        </tr>
    </table>

 效果如下: