前端学习——HTML（三）表单与表格标签

表单

html表单以一个< form >元素开始。

<form action="" method="POST">
</form>

其中action表示提交到后台的网址 ，method属性表示表单提交的方式。

基本控件

文本框

<p>
   请输入你的姓名：<input type="text">
</p>
<p>
   手机号码：<input type="text" value="" disabled>
</p>
<p>
   电子邮箱：<input type="text" placeholder="请输入正确的邮箱">
</p>
        

单选按钮

老式收音机按下一个按钮，其他按钮就会弹起来，因此用type="radio"表示单选按钮。在设置按钮的时候必须绑定一个value值，以做到把值传给后端。

<p>
    性别：
    <label>
        <input type="radio" name="sex" value="男" checked> 男
    </label>        
    <label>
        <input type="radio" name="sex" value="女"> 女
    </label>
</p>

注意：
1）在几个互斥选项中，要进行同样的名字绑定，示例中为name=“sex”，否则不能做到互斥。
2）checked属性表示默认选中这个值。
3）将组件放入label标签对中，可以做到点击文本就能选中。

多选按钮

type="checkbox"设置多选框，同样需要设置同一个name值。

<p>
   爱好：
   <label>
    	<input type="checkbox" name="hobby" value="足球"> 足球
   </label>
   <label>
   		<input type="checkbox" name="hobby" value="篮球"> 篮球
   </label>
   <label>
         <input type="checkbox" name="hobby" value="羽毛球"> 羽毛球
   </label>
   <label>
          <input type="checkbox" name="hobby" value="游泳"> 游泳
    </label>
</p>

密码框

将type属性设置为password的input元素可以设置密码框。

<p>
    请输入密码：
    <input type="password">
</p>

下拉菜单

<p>
   请选择你最喜欢的编程语言：
   <select>
	   <option value="Java">Java</option>
	   <option value="JavaScript">JavaScript</option>
	   <option value="Python">Python</option>
	   <option value="C++">C++</option>
	</select>
</p>

多行文本框

<p>
   备注：
   <textarea cols="100" rows="10"></textarea>
</p>

按钮

按钮分为普通按钮、提交按钮和重置按钮。

<p>
	<input type="button" value="普通按钮">
</p>
<p>
    <input type="submit" value="提交表单">
</p>
<p>
    <input type="reset" value="重置表单">
</p>

此外，HTML5中还增加了color、data、time等控件。

表格

与列表相似，使用一个table来声明一个表格，tr表示一行，th表示其中的元素，其中th不能单独出现。为了能够显示边框，使用border=“1”。使用caption标签创建表格的标题。

<table border="1" width="600">
        <caption>标题</caption>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
            <th>第四列</th>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td>H</td>
        </tr>
        <tr>
            <td>I</td>
            <td>J</td>
            <td>K</td>
            <td>L</td>
        </tr>
    </table>

单元格的合并

使用colspan和rowspan分别进行单元格的列合并和行合并，也可以同时使用。

<table width="400" border="1">
  <tr>
	  <td colspan="2">A</td>
	  <td>B</td>
	  <td>C</td>
  </tr>
  <tr>
      <td>D</td>
      <td colspan="3">E</td>
  </tr>
  <tr>
      <td>F</td>
      <td>G</td>
      <td>H</td>
      <td>I</td>
  </tr>
</table>

<h2>行合并</h2>

  <table width="300" border="1">
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td rowspan="2">F</td>
      <td>G</td>
      <td rowspan="3">H</td>
     </tr>
     <tr>
       <td>I</td>
       <td>J</td>
     </tr>
     <tr>
        <td>K</td>
        <td>L</td>
        <td>M</td>
     </tr>
  </table>

<h2>同时进行列合并和行合并</h2>
   <table border="1" width="300">
     <tr>
       <td>A</td>
       <td>B</td>
       <td>C</td>
       <td>D</td>
      </tr>
      <tr>
        <td>E</td>
        <td rowspan="2">F</td>
        <td rowspan="3" colspan="2">G</td>
       </tr>
       <tr>
         <td>H</td>
       </tr>
       <tr>
         <td>I</td>
         <td>J</td>
       </tr>
</table>