HTML表单标签

野性酷女 2022-05-31 11:40 287阅读 0赞

1、 **<form>**标签提供给用户输入的表单标签，  
   type表示控件类型，为可选，默认为text。  
   name表示提交的参数名，   
   value表示显示值。  
   placeholder表示输入框范例。

**代码**

**![20180223164354747][]**

**效果**

![201802231644100][]

2、 **<textarea>**标签定义多行文本输入控件。  
   rows、cols属性分别控制高、宽。  
   常用style="width: 10px; height: 20px;"控制宽、高。

**代码**

**![20180223164428453][]**

**效果**

![2018022316444770][]  
  
3、 **<button>**标签定义一个按键。  
   IE浏览器将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。  
   IE浏览器的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。所以建议写上type属性。

**代码**

**![20180223164503258][]**

**效果**

![20180223164512923][]  
4、 **<select>**标签定义下拉列表。  
   name表示参数名，用于接收option条目的值。  
   size表示最大显示列表条目。

**代码**

**![20180223164522599][]**

**效果**

![20180223164534906][]  
  
5、 **<optgroup>**标签定义下拉列表中的组合选项。

**代码**

**![20180223164550545][]**

**效果**

![20180223164605810][]  
  
6、 **<label>**标签定义 input元素的标注。  
   for与id作用相同。

**代码**

**![20180223164635880][]**

**效果**

![20180223164645750][]  
  
7、 **<fieldset>**标签定义 form表单边框。  
   legend表示该边框内的信息主题。  
   align定义legend主题位置，默认left。

**代码**

**![20180223164659418][]**

**效果**

![20180223164710311][]  
  
8、 **<datalist>**标签定义输入框中可能输入的值。  
   list属性来绑定 datalist标签。

**代码**

**![20180223164723531][]**

**效果**

![20180223164737752][]

9、**<output>**标签定义不同类型的输出。

**代码**

**![20180223164811644][]**

**效果**

![20180223164823469][]

[20180223164354747]: /images/20220531/432e1772f117415f8435ba4910814101.png
[201802231644100]: /images/20220531/81f34da96c1d453bb62d8d94bb65d94d.png
[20180223164428453]: /images/20220531/efec499919c643c898dea1fbc11ea05d.png
[2018022316444770]: /images/20220531/53ad23c36ccc492484917cb43acfe72c.png
[20180223164503258]: /images/20220531/34c871b98e2049239cfeae2c26546b4f.png
[20180223164512923]: /images/20220531/538dc0116a1c4623a29ac3bf1df7bab2.png
[20180223164522599]: /images/20220531/482cfd97bf4f4bcd90d46d9c5172e6c4.png
[20180223164534906]: /images/20220531/586c5946c0034873a5bfef93133712e0.png
[20180223164550545]: /images/20220531/d9fc2890503f4f1891f6dd1f864ea5aa.png
[20180223164605810]: /images/20220531/10c6d9da230542ed9d3b5e25a97b2a33.png
[20180223164635880]: /images/20220531/d2fcd416f7e840c0929b3ad4c8a4665e.png
[20180223164645750]: /images/20220531/865731bd16b249488349b6c46b89eedc.png
[20180223164659418]: /images/20220531/d93ccc3bddb6481ab10b8b7330d48a95.png
[20180223164710311]: /images/20220531/74af82163c0a42859e59c69258dc1ca0.png
[20180223164723531]: /images/20220531/954f991ec7a24f15b17c0537f75be880.png
[20180223164737752]: /images/20220531/f866395f1a4a4497ba36e930e0851d92.png
[20180223164811644]: /images/20220531/026d152ce7ec4d8a99bd19826a470eb5.png
[20180223164823469]: /images/20220531/e9b365ae6f3f424bb21f285816e9f083.png