HTML之表格和表单

最新推荐文章于 2023-07-01 16:35:55 发布

做梦还在敲代码

最新推荐文章于 2023-07-01 16:35:55 发布

阅读量321

点赞数

分类专栏：前端基础知识文章标签： html

本文链接：https://blog.csdn.net/qq_43883961/article/details/106245037

版权

前端基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、表格

第一点：
align设置表格在网页内居中
border设置表格边框
cellspacing设置表格与表格之间的距离
cellpadding设置表格内容与表格边框之间的距离

 <table align="center" border="1" cellspacing="0" cellpadding="0">
 </table>

第二点：
th—表头单元格，有加粗居中的效果
td—普通单元格，无特殊效果
tr—代表一行
caption—表格标题

<caption><h3>我是一个表格</h3></caption>
<thead>
    <tr>
     	<th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
         <th>照片</th>
    </tr>
</thead>

第三点：
①rowspan—跨行合并，选择合并单元格个数，并删除多余单元格，一般是从上到下进行合并
②colspan—跨列合并，选择合并单元格个数，并删除多余单元格，一般是从左到右进行合并

<tr>
    <td>花花</td>
    <td>男</td>
    <td>30</td>
   <td rowspan="2">照片</td>
</tr>
 <tr>
     <td>易烊千玺</td>
     <td>男</td>
     <td>20</td>
      <!-- <td>照片</td> -->
</tr>

第四点：
thead—表格的头部
tbody—表格的主体部分
tfoot—表格的脚注部分

 <thead>
      <tr>
          <td></td>
      </tr>
 </thead>
<tbody>
    <tr>
         <td></td>
      </tr>
</tbody>
 <tfoot>
        <tr>
             <td></td>
        </tr>
</tfoot>

二、表单

form用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器
action—用于指定接收并处理表单数据的服务器的url地址
method—用于设置表单数据的提交方式，其取值为get或post
name—用于指定表单的名称，区分同一个页面中的多个表单

 <form action="" method="" name="基础知识"></form>

text—单行文本输入框

用户名：<input type="text" name="username"><br>

password—密码输入框

密码: <input type="password" name="password"><br>

radio—单选按钮
checked—默认选中状态

男<input type="radio" name="sex" 
	checked="checked">
女<input type="radio" name="sex"><br>

checkbox—复选按钮

唱歌<input type="checkbox" name="hobby">
画画<input type="checkbox" name="hobby">
打篮球<input type="checkbox" name="hobby">
踢足球<input type="checkbox" name="hobby">

button—普通按钮
value—按钮上的值

<input type="button" name="login" value="登录">

submit–提交按钮，有默认值为–提交查询，可通过value修改

input type="submit">

reset–重置按钮，有默认值为–重置，可通过value修改

<input type="reset">

image–图片提交按钮必须包含src属性

<input type="image" src="./1.jpg">

file–上传文件

<input type="file">

获取光标------使用label标签（当鼠标点击label标签内的文字时，表单会自动获取光标）
第一种：所有内容都包含在label标签内
第二种：解释内容不包含在label标签内，使用for和id进行连接

  <label>姓名：<input type="text" name="name">
  </label>
  <br>
  ----------------------------------------------------------------------
  <label for="age">
  年龄：</label>
  <input type="text" name="age" id="age">
  <br>

textarea文本域，双标签，可显示多行文本

用户评论：<textarea></textarea>

select下拉列表
selected="selected"默认选中项

籍贯：
        <select>
            <option>---请选择省份---</option>
            <option selected="selected">北京</option>
            <option>上海</option>
            <option>河南</option>
            <option>广州</option>
        </select>

三、表格和表单合并练习

效果图
在这里插入图片描述
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非诚勿扰</title>
</head>
<body>
    <table align="center" width="600px">
        <caption><h4>520快来脱单吧</h4></caption>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex">男
                <input type="radio" name="sex">女       
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="year">
                    <option value="year" selected="selected">请选择年</option>
                    <option value="year">1999</option>
                    <option value="year">1998</option>
                    <option value="year">1997</option>
                    <option value="year">1996</option>
                    <option value="year">1995</option>
                </select>
                <select name="month">
                    <option value="month" selected="selected">请选择月</option>
                    <option value="month">1</option>
                    <option value="month">2</option>
                    <option value="month">3</option>
                    <option value="month">4</option>
                    <option value="month">5</option>
                    <option value="month">6</option>
                    <option value="month">7</option>
                    <option value="month">8</option>
                    <option value="month">9</option>
                    <option value="month">10</option>
                    <option value="month">11</option>
                    <option value="month">12</option>
                </select>
                <select name="day">
                    <option value="day">请选择日</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                    <option value="">13</option>
                    <option value="">14</option>
                    <option value="">15</option>
                    <option value="">16</option>
                    <option value="">17</option>
                    <option value="">18</option>
                    <option value="">19</option>
                    <option value="">20</option>
                    <option value="">21</option>
                    <option value="">22</option>
                    <option value="">23</option>
                    <option value="">24</option>
                    <option value="">25</option>
                    <option value="">26</option>
                    <option value="">27</option>
                    <option value="">28</option>
                    <option value="">29</option>
                    <option value="">30</option>
                    <option value="">31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" name="area">
            </td>           
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                未婚<input type="radio" name="marry">
                离婚<input type="radio" name="marry">
                丧偶<input type="radio" name="marry">
            </td>    
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" name="degree"></td>
        </tr>
        <tr>
            <td>月薪</td>
            <td><input type="text" name="salary"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" name="phone number"></td>
        </tr>
        <tr>
            <td>昵称</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                妩媚<input type="checkbox" name="type">
                柔美<input type="checkbox" name="type">
                可爱<input type="checkbox" name="type">
                小鲜肉<input type="checkbox" name="type">
                型男<input type="checkbox" name="type">
                气质<input type="checkbox" name="type">
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea name="introduce"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="regist" value="免费注册"></td>
        </tr>
    </table>
</body>
</html>