form主要用于采集和提交用户输入的信息并向服务器传输数据。
例如一个简单的用户登录例子如下:
<form action="/" method="post">
<div>
<label for="name">姓名:</label>
<input type="text" id="name">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password">
</div>
<input type="submit">
</form>
表单主要有控件和属性这两个要素组成。
表单的属性如下和用法如下:
属性|值|作用
-|-|
accept-charset
|MIME_type
|用于规定服务器可处理的表单数据字符集。
action
|URL
|用于规定当提交表单时向何处发送表单数据。
autocomplete
|on/off
|规定是否启用表单的自动完成功能。
enctype
|1.application/x-www-form-urlencoded 2.multipart/form-data 3.text/plain
|规定在发送表单数据之前如何对其进行编码。
method
|get/post
|规定用于发送 form-data 的 HTTP 方法。
name
|form_name
|规定表单的名称。
novalidate
|novalidate
|如果使用该属性,则提交表单时不进行验证。
target
|_blank/_self/_parent/_top/framename
|规定在何处打开 action URL。
表单要包含一些控件,用于收集用户输入的数据。
表单常用的控件和用法如下:
1.文本域text,用户可以在文本域写入文本。
<form>
名:<input type="text" name="firstname">
姓:<input type="text" name="lastname">
</form>
2.密码域password,用于创建HTML的密码域。
<form>
用户:
<input type="text" name="user">
<br />
密码:
<input type="password" name="password">
</form>
3.复选框checkbox,用户可以选中或取消选取复选框,多选
<form>
旅游:
<input type="checkbox" name="lvyou">
宠物:
<input type="checkbox" name="chongwu">
</form>
4.单选按钮radio,当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态
<form>
男性:
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性:
<input type="radio" name="Sex" value="female" />
</form>
name要一致才是同一组。
5.下拉列表,selected="selected"为选中状态。
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
6.文本域textarea,用户可以在文本域中写入文本。在文本域中,可写入的字符字数不受限制。
<textarea name="" id="" cols="30" rows="10">
输入字符数不受限制
</textarea>
7.按钮button,可以对按钮上的文字进行自定义。
<form>
<input type="button" value="下一步">
</form>
8.submit,用于提交表单信息,带有输入框和提交按钮的表单如下代码:
<form action="action_page.php">
姓名:
<input type="text" name="fname" >
密码:
<input type="password" name="password" >
<input type="submit" value="提交">
</form>
action的值表示向此页面发送表单数据。