## 9.2.1.form标签
form标签的作用是用于将其他表单标签“包”起来,以便作为一个整体,可以提交数据到服务器。
形式:
```
<form name=”表单名称” action=”目标地址” method=”数据提交方式” >
。。。这里写其他具体的一个一个表单标签。。。
。。。还可以出现几乎所有其他各种标签(除了html,body,head等少数几个)。。。
</form>
```
![](https://img.kancloud.cn/bf/e7/bfe7a5cdd0f52f70e0a8790bae388178_730x405.png)
单行文本框:
![](https://img.kancloud.cn/8c/5f/8c5fd9b9e2b57c6fd4e312d8a82b3eb7_767x274.png)
* disabled属性: 不可用(无效),该属性也是一个无值属性,通常设定其值为其本身。
* readonly属性:也是一个无值属性,表示“只读”,就是不可改变。
* 注意:无值属性可以直接写属性名,无需赋值就可以。
密码文本框:
![](https://img.kancloud.cn/1f/5b/1f5ba85567adf6d1449cab2f4eb504eb_722x121.png)
隐藏文本框:
![](https://img.kancloud.cn/0c/29/0c29e51602e8ceafb9d856b638d89e0d_535x63.png)
隐藏文本框在网页上不可见,但其中的数据可用!
单选项:
![](https://img.kancloud.cn/e1/0c/e10ce089754c5091197e24ff4476a495_623x271.png)
多选项:
![](https://img.kancloud.cn/f0/21/f02146e14dd432d5b45758d66a432240_505x169.png)
文件域:
![](https://img.kancloud.cn/5b/79/5b79579a9cdfab94ba42ce2e66bf6776_594x77.png)
提交按钮:
![](https://img.kancloud.cn/25/d9/25d938876834401c034fcba764f5cea7_624x42.png)
图片按钮:
![](https://img.kancloud.cn/19/24/1924cf92d7e410d5bb35b15371e36c85_674x50.png)
重置按钮:
![](https://img.kancloud.cn/4f/6c/4f6ce1162ca4285d7f5a3806cbbd48a8_591x51.png)
特别注意:重置是指将表单恢复到刚开始的状态(样子)——不是清空表单!!!
普通按钮:
![](https://img.kancloud.cn/b4/11/b411dca033742a7a4a938951dd434ed1_730x52.png)
就是有个样子,没有对表单起作用!
表单框:
![](https://img.kancloud.cn/ba/90/ba9032d145cc6ddb6df9a6f2ac9caf3c_758x229.png)
## 9.2.2.下拉列表
Select,option
这两个标签是联合使用的,用于实现网页上的“列表选项”,通常就是下拉列表。
形式如下:
```
<select name=”名称” size=”行数”>
<option value=”值1”>文字1<option>
<option value=”值2” selected=”selected” >文字2<option>
。。。更多选项照上述格式写出。。。
</select>
```
说明:
1,size属性:表示该列表选项展示出的项数(行数),如果为1(默认值),就是下拉列表。
2,selected属性:表示该option选项默认被选中。只应该出现在一个option上。
示例:
![](https://img.kancloud.cn/e9/0e/e90ef1db6f7f4c1d65aa327682714ce7_460x211.png)
Optgroup选项组,label描述,标注
![](https://img.kancloud.cn/7a/c4/7ac4ff9a4a181ae7e0bd8753124ce128_486x184.png)
## 9.2.3.textarea标签
![](https://img.kancloud.cn/d7/f1/d7f183e5cf4b2e994fe80adb9da923a9_415x61.png)
textarea标签用于实现“多行文本输入框”。
形式:
```
<textarea name=”名称” cols=”列数” rows=”行数”>这里可以放内容,通常留空</textarea>
```
## 9.2.4.button标签
button标签就是“按钮标签”,其作用是在网页上展示一个“按钮”而已。
形式:
```
<button name=”名称” >按钮文字</button>
```
说明:
```
一般不需要用这个标签,而是直接使用<input type=”button” >来实现更为常见,效果一样。
```
- 1、相关介绍
- 1.1.关于全栈学科
- 1.2.全栈工程师与全栈开发
- 1.3.基本技能
- 1.4.学习方法
- 2、html初步
- 2.1.什么是网页和网站
- 2.2.网页浏览原理
- 2.3.什么是html
- 2.4.html基本知识
- 2.5.综合案例
- 3、html结构标签
- 3.1.文档级结构标签
- 3.2.内容级结构标签
- 3.3.块标签和行内标签
- 4、html文本标签
- 5、html列表标签
- 5.1.无序列表ul>li
- 5.2.有序列表ol>li
- 5.3.定义列表dl>dt,dd
- 6、html图像标签
- 6.1.网页路径问题
- 7、html链接标签
- 7.1.超链接
- 7.2.锚链接
- 7.3.link标签
- 8、html表格标签
- 8.1.表格初步
- 8.2.表格高级
- 8.3.表格案例
- 9、html表单标签
- 9.1.表单初步
- 9.2.表单标签详解
- 9.3.表单和表格综合案例
- 10、html5新增标签与属性
- 10.1.一些新增标签
- 10.2.一些新增input类型
- 10.3.一些新增属性
- 11、其他零碎及相关知识
- 11.1.meta标签(元信息标签)
- 11.2.网页的字符编码问题
- 11.3.特殊字符——字符实体
- 11.4.文档类型(了解)
- 11.5.内嵌框架标签iframe(了解)
- 12、CSS的引入
- 12.1.CSS引入
- 12.2.什么是css?
- 12.3.为什么需要css?
- 13、css入门
- 13.1.css样式分类(根据css代码位置分)
- 13.2.css基本语法
- 13.3.css简单的选择器
- 13.4.css属性
- 13.5.css入门综合案例
- 14、选择器详解
- 14.1.选择器综述
- 14.2.基础选择器
- 14.3.关系选择器
- 14.4.属性选择器
- 14.5.伪类选择器
- 14.6.伪元素选择器
- 14.7.常见选择器的组合
- 14.8.css样式的特性
- 15、有关文字的属性
- 15.1.字体属性
- 15.2.文本属性
- 16、有关盒子的属性
- 16.1.盒子概述
- 16.2.盒子的宽高属性width和height
- 16.3.边框属性border
- 16.4.内边距属性padding
- 16.5.外边距属性margin
- 16.6.背景属性background
- 16.7.轮廓属性outline
- 16.8.盒子综合案例
- 17、有关布局的属性
- 17.1.布局属性
- 17.2.页面布局应用
- 18、定位属性
- 19、列表与表格样式
- 19.1.列表样式
- 19.2.表格样式
- 20、CSS3高级特性
- 20.1.盒子新特性
- 20.2.多栏布局column
- 20.3.弹性布局flex
- 20.4.2D变换transform(2D)
- 20.5.3D变换transform(3D)
- 20.6.过渡效果transition
- 20.7.动画效果animation
- 21、零碎或补遗或经验
- 21.1.光标形状设置cursor
- 21.2.盒子缩放zoom
- 21.3.文字阴影text-shadow
- 21.4.文字溢出text-overflow
- 21.5.盒子模型box-sizing
- 21.6.css初始化
- 21.7.css精灵技术
- 21.8.自定义字体