html表单制作及实例（html表单标签有哪些）

1.槪念

用来收集用户输入的信息，定义采集数据的范围，并且完成与用户的基本交互的作用。

表单就是输入框、单选框、复选框、按钮、选项菜单等网页元素，也称表单元素。

2.语法

form标签，所有表单元素都要放在form标签中。

<form action = "#" method = "get">xx</form>   <!-- # 是没有数据时的占位--> 

from标签属性：

① action：设置发送数据的位置；

② method：用什么方式发送数据。

属性值分为get和post：get，发送数据时直接显示在url栏中，发

送数据量小，且不安全；post，直接通过服务器发送数据，用户看不到过

程，且数据量较大。

3.表单元素

一般使用 input标签：

<form action = "#" method>
 			<input type  = "text" name = "age"/>
  </form>

input标签属性：

type属性：设置当前输入框的不同形态。值分别为：

password 密码框，text输入文字、字母、数字等

submit 提交按钮，reset 重置按钮

button 普通按钮，checkbox 表单复选框

radio表单单选框。

name 属性：给当前的表单元素数据起个名字，不能是中文和特殊符号。 （除了按钮标签外需要输入数据的都要加name属性）

value 属性：当前表单元素的默认值，在按钮标签中会显示在按钮上，在选项框里必须有，否则后端看到为on。

例如，<input type = "radio" name = "sex" value = "男"/>，传递给后端数据为sex=男，如果不写value，则显示sex=on。

placeholder属性：输入框的提示信息。

maxlength属性：设置输入text和password输入框的最大字符数。

size属性：当type = "text"或"password"时，设置元素的宽度。

checked属性：当type为radio或checkbox时，设置单选框或复选框的默认选中项。

4.扩展表单元素

如图，select 标签表示声明下拉列表；option 标签用于声明列表项；selected 改变下拉列表默认选中项。

多文本域（textarea）：

<textarea rows="3" cols="20 maxlength="50" name="demo"></textarea>
属性值：rows高度（行）cols宽度（列）