form表单的基本使用

介绍：from作用前端数据采集和为后端传输数据的作用；

表单标签内包含表单元素(文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传)和表单按钮

form表单的属性：

action：属性用于指定接收并处理表单数据的服务器程序的URL地址

enctype：设置编码类型(适用于method="post"的情况)

method：设置表单的提交方式（主要有post和get）

name：属性用于指定表单的名称

target：规定在何处打开跳转的页面；值(_blank：在新窗口中打开、_self：在相同的框架中打开(默认)、_parent：在父框架集·中打开、_top：在整个窗口中打开、framename：在指定iframe中打开)

input标签：

input属性：

value可以设置默认值

实现单选功能，需要设置name的值相同

当type类型选择file类型时　可以设置属性指定某种特殊类型

accetp 用于指定类型

multiple 允许多选

readonly 只读，不能修改

checked 默认选中

disabled 禁止操作

input类型：

文本框：<input type="text" name="username" value="admin" maxlength="10"/>

只读文本框：<input type="text" value="只读文本无法修改" readonly>

密码框：<input type="password" name="passwd" value="123">

单选框：

<inputtype="radio"name="gender"value="0"checked>内容1 <inputtype="radio"name="gender"value="1">内容2

复选框：

<input type="checkbox" name="sx">内容1

<input type="checkbox" name="yw">内容2

<input type="checkbox" name="wl" checked>内容3

<input type="checkbox" name="yy" checked>内容4

文件上传：上传文件：<input type="file" name="file" multiple accept="image/*">

提交按钮：<input type="submit" value="提交">

重置按钮：<input type="reset" value="清空">

普通按钮：<input type="button" value="确定">

textarea文本区域标签：

<textareaname=""id=""cols="30"rows="10"placeholder="请输入一段文字"maxlength="20"></textarea>

通过 textarea 控件定义多行文本输入控件，可以轻松地创建多行文本输入框，文本区可以容纳无限数量的文本，可以通过 cols（列数）和 rows（行数）属性来确定 textarea 的尺寸，设置了 maxlength="20" ，超过20字则无法输入。

label 标签：

label标签通常和radio或者checkbox元素关联，可以实现点击文字也能选择/取消checkbox或者radio。

<input type="checkbox" name="a" value="2" id="A"><label for="A">黄金糕</label>

<input type="checkbox" name="a" value="3" id="B"><label for="B">龙须面</label>

<input type="checkbox" name="a" value="4" id="C"><label for="C">北京烤鸭</label>

<input type="checkbox" name="a" value="1" id="D" checked ><label for="D">刀削面</label>

select 下拉列表标签:

select标签可以包含option标签和optgroup标签，optgroup标签实现了option的分组，使用label来显示分组的名称。

对option添加select属性，可以实现默认选中该选项。

<select >

<optgroup label="内容1">

<option value="a">内容1-1</option>

<option value="b">内容1-1</option>

</optgroup>

<option value="c">内容2</option>

<option value="d">内容3</option>

</select>

fieldset分组标签 :

filedset元素可以将表单内的相关元素分组；

legend标签为fieldset元素定义标题。

<fieldset>

<legend>分组：</legend>

分组1：<inputtype="text">

分组2：<inputtype="text">

</fieldset>