🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 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” >来实现更为常见,效果一样。 ```