form表单的基本使用

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

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

form表单的属性:

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

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

method:设置表单的提交方式(主要有postget

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>


版权声明:本文为weixin_45834289原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。