HTML的form表单

Posted 2022-05-29 yinfa

.表单form

单是一个包含表单元素的区域。

表单能够包含 input 元素，textarea、select、fieldset、legend 和 label 元素。

表单使用标签（<form>）定义。

表单用于向服务器传输数据。

<form name="form1" action="URL" method="get">

用户名：<input type="text" name="uname" />

密 码：<input type="password" name="passwd" />

</form>

属性 说明

name 表单的名称

action 表单提交地址

method 表单数据提交的方式 （get ,post）

enctype MIME类型

target 打开方式

 

<input>(表单元素：输入框)

属性 说明

type input元素类型

name input 元素的名称

value input 元素的值

size input 元素的宽度

readonly 是否只读

maxlength 输入字符的最大长度

disabled 是否禁用

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

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

单选框：<input type="radio"name=" "value=" "checked />

复选框：<input type="checkbox"name="" value=" "/>

隐藏域;<input type="hidden" name="" value=""/>

 

按钮：

<input type="button" name="btn" value="确定"/>

<input type="submit" name="comit" value="提交"/>

<input type="reset" name="reset" value="重写"/>

<input type="image"name="img_btn" src="btn.gif"/>

上传文件：<input type=”file” name=””/>

注意：

利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

 

说明：

 multiple     控制是否上传多文件

 

textarea(表单元素：多行文本域)

<textarea name="content" rows="5" cols="50"> </textarea>

属性 说明

name 元素的名称

rows 指定文本框的高度

cols 指定文本框的宽度

 

select(表单元素：下拉框)

<select name="city">

<option value="0">请选择</option

<option value=“bj” selected >北京</option>

<option value="gz">广州</option>

</select>

属性 说明

name 下拉列表框的名称

size 下拉列表框的显示行数

multiple 是否多选

disabled 是否禁用

selected 设置默认选中的选项

value 选项的值

optgroup(表单元素：下拉框分组)

optgroup 元素用于组合选项

<select name="city" multiple>

<optgroup label="广东">

<option value="1">广州</option>

</optgroup>

 </select>

属性 说明

label 指定组合选项名称

Label : lable 标签的作用是将输入项或选项及其标签文字关联起来。

例：

<input type="radio" name="sex" value="1" id="male" />

<label for="male">男</label>

 

html5的表单所有Input类型 type