HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单

简介: HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单

本教程案例在线演示


有路网PC端

有路网移动端


免费配套视频教程


免费配套视频教程


教程配套源码资源


教程配套源码资源


表格


table标签(表格)、

tr标签(行)、

td标签(标准单元格)、

caption标签(标题)、

th标签(表头单元格)。

为了更深一层对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。

这三个标签把表格分为三部分:表头、表身、表脚。

table   表格

caption 标题

thead   表头(语义划分)

tbody   表身(语义划分)

tfoot   表尾(语义划分)

tr  行

th  表头单元格

td  表格单元格

<table>
    <caption>考试成绩表</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>英语</th>
        <th>数学</th>
    <tr>
    </thead>
    <tbody>
    <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>平均</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    </tfoot>
</table>


image.png


image

表格样式美化

<style>
table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
}
th, td {
     padding: 6px;
    color: blue;
}
</style>


给表格添加边框,设置字体颜色,

以及给单元格设置一些padding

image.png


表单


image.png

image

表单就是收集用户信息的,就是让用户填写的、选择的。

<div> <h3>欢迎注册本网站</h3>
    <form> 所有的表单内容,都要写在form标签里面</form>
</div>

form是英语表单的意思,form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容

1.文本框

<input type="text" value="默认值" />

2.密码框

<input type="password"/>

3.单选按钮

<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女

input的type的值如果是radio就是单选按钮。

需要注意的是必须要有相同的name属性,单选按钮才能互斥。

label标签

<input type=“radio” name=“sex” id=“nan” /> 
<label for=“nan”>男</label> 
<input type=“radio” name=“sex” id=“nv” />
<label for=“nv”>女</label>

input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。点击label标签中的文字就可以选择相应的单选框

5.4.复选框

<input type="checkbox" name="aihao"/> 睡觉 
<input type="checkbox" name="aihao"/> 吃饭

复选框,最好也是有相同的name(便于服务器端收集用户选中的信息)。

5.下拉列表

<select>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>打豆豆</option>
</select>

select就是“选择”,

select标签和ul、ol、dl一样,都是组标签

option“选项”。

6.文本域

<textarea cols="20" rows="10"></textarea>

cols属性表示columns“列”,

rows属性表示rows“行”。

值就是数字,表示行数和列数。标签对儿中间的文字是默认出现在文本框的文字,一般不需要写字。

7.按钮

普通按钮

<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value的“值”就是按钮上面显示的文字。

提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击,表单会提交到服务器。

重置按钮

<input type="reset" />

reset就是“复位”“重置”的意思,可以重置前面各个表单元素中填写的值。


只读和禁用

<input name="name" type="text" value="张三"  readonly="readonly">
<input type="submit "  disabled="disabled"  value="保存" >


项目实战

制作商品搜索表单


image.png


search-form.css

.search{
  height: 40px;
  width: 420px;
  margin: 0 auto;
  margin-top: 60px;
}
.search .input{
  border: 3px solid red;
  width: 300px;
  height: 36px;
  font-size: 20px;
}
.search .btn{
  height: 44px;
  width: 100px;
  border:0;
  background-color: red;
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-left: -4px;
  vertical-align: top;
  letter-spacing: 6px;
}

youlu-search-form.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="search-form.css">
</head>
<body>
  <div class="search">
    <form action="#">
      <input class="input" type="text" placeholder="书名">
      <input class="btn" type="button" value="搜索">
    </form>
  </div>
</body>
</html>


目录
相关文章
|
25天前
|
前端开发 JavaScript 微服务
jeecg-boot前端实现表格插槽、定制化修改
jeecg-boot前端实现表格插槽、定制化修改
32 0
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
1月前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
27 1
|
1月前
|
存储 前端开发
web前端开发----------表格
web前端开发----------表格
46 0
|
20小时前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
7天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
23天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
28 3
Web前端全栈HTML5通向大神之路
|
1月前
|
前端开发 JavaScript 开发者
前端的HTML使用
前端的HTML使用
15 3
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
17 0