html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...

## 本教程案例在线演示

## 教程配套源码资源

### 表格

table标签(表格)、

tr标签(行)、

td标签(标准单元格)、

caption标签(标题)、

th标签(表头单元格)。

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

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

table 表格

caption 标题

thead 表头(语义划分)

tbody 表身(语义划分)

tfoot 表尾(语义划分)

tr 行

th 表头单元格

td 表格单元格

姓名语文英语数学

小明808080小红909090小杰100100100平均909090

### 表格样式美化

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 6px;

color: blue;

}

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

欢迎注册本网站

所有的表单内容，都要写在form标签里面

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

1.文本框

2.密码框

3.单选按钮

男女

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

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

label标签

男

女

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

5.4.复选框

睡觉

吃饭

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

5.下拉列表

吃饭

睡觉

打豆豆

select就是“选择”，

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

option“选项”。

6.文本域

cols属性表示columns“列”，

rows属性表示rows“行”。

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

7.按钮

普通按钮

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

提交按钮

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

重置按钮

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

### 只读和禁用

### 项目实战

制作商品搜索表单

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

Document

html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...相关推荐

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源网页开发工具 VSCode 或 WebStorm HTML简介 HTML:Hyp ...
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源考虑对人的描述方式人 {身高:175cm; 体重:70kg; 肤色:黄色 } ...
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页 ...
easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
<HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目录第3章 HTML表格与表单................................... ...
HTML5简明教程系列之HTML5 表格与表单（二）
HTML的第二弹也来了,最近高产似母猪,状态也不错,代码来源为实验课.本期主要内容为:HTML表格与DIV应用.HTML表单.上期基础部分的传送门: HTML5简明教程系列之HTML5基础(一)_Th ...
HTML中的表格和表单控件详解
文章目录前言表格和表单控件的作用? 一.表格控件的语法 1.tr标签和td标签 2.表格的属性二.表单控件的用法 1.创建表单 2.表单的常用属性 3.表单常用控件(input控件) 4.文本域 ...
html中的列表、表格、表单
目录一.列表(有序列表和无序列表) 1.无序列表 2.有序列表 3.列表的嵌套二.表格 1.表格所需的主要标签 2.详细介绍表格的制作 3.单元格的合并(跨行和跨列) 三.表单 1.表单标签 ...
HTML5表格，表单的实现过程
本篇博客读完,看着图片能够一步一步做出表格(表单)就算达到目的,看到表格(表单)的图片之后,可以先思考一下自己会如何实现. 从行着手是我发现的一个核心点,大部分表格(表单)都可以拆分为一行一行,奇妙的 ...
HTML之表格与表单
文章目录表格一.表格的格式二.表格标签表单一.作用二.表单结构三.表单控件案例:表格与表单结合表格一.表格的格式 <table> //定义表格<tr> // ...

html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...

欢迎注册本网站

html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...相关推荐

最新文章

热门文章