html 标记语言表单Form介绍

2019-02-28 0 By admin

在WEB 上通过组合表单控件来创建表单,如文本框、复选框、选择框和单选按钮等。

一、表单元素

1、form 表单元素至少附带的两个特性:action 和method。
2、fieldset 元素在表单控件组周围创建边框,以表明这些表单控件是相关的。
3、legend 元素允许用户为fieldset元素指定一个主标题,该主标题作为表单控件组的名称。

二、表单特性

1、action 特性指示提交表单时将如何处理数据。
2、method 特性使用post或者get方式将数据提交到服务器。
3、label 特性指定与该标签相关联的表单控件。
4、onsubmit 特性当用户点击提交按钮时,会触发此特性指定的事件。
5、onreset 特性当用户点击此按钮时,会清空表单中所有内容。

三、文本输入控件

<input type="text" name="inputsingleline" size="20"/>

四、密码输入控件

<input type="password" name="pwd" size="20"/>

五、多行文本输入控件

<textarea name="textcontent" rows="20" cols="50">
Input your content.
</textarea>

六、提交按钮

<input type="submit" name="submit" />

七、重置表单控件按钮

<input type="reset" name="reset" />

八、复选框

<form action="" method="get">
您喜欢的水果?<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
</form>

九、单选按钮

<label>性别:</label>
<form action="" method="get">
<input type="radio" name="0" value="1" checked="checked"/> 男
<input type="radio" name="0" value="2" /> 女
</form>

十、选择框(下拉框)

<form action="" method="get">
<label>选择日期:</label>
<select name="selday">
<option value="mon">周一</option>
<option value="tue">周二</option>
<option value="wed" selected="selected">周三</option>
<option value="thu">周四</option>
</select>
</form>

十一、文件选择框

<form enctype="multipart/form-data" method="post">
<input type="file" name="uploadfile"/>
</form>

十二、隐藏控件

<form action="PersonSave.ashx" method="post">
<input type="hidden" name="action" value="{action}"/>
<input type="hidden" name="id" value="{id}"/>
</form>