HTML中form表单的用法
2017-03-24 本文已影响0人
饥人谷_tanfei
<form> 标签用于为用户输入创建 HTML 表单。
- 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
- 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
- 表单用于向服务器传输数据。
常见的表单元素
- type="text",用于对文本域进行文本的输入
<input type="text" name="firstname">
- type="password",用户进行密码的输入,隐藏输入内容
<input type="password" name="password">
- type="checkbox",用户进行复选按钮操作加上checked时会默认选中
<input type="checkbox" name="Bike">
- type="radio",用户进行单选按钮操作,当name相同时为同一组单选按钮
男性:<input type="radio" checked="checked" name="Sex" value="male" />
女性:<input type="radio" name="Sex" value="female" />
- type="select"用户进行下拉列表操作,加上selected时为默认选中一项
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
- type="textarea"用户在多行文本框中进行输入,输入框可以任意伸缩,可以用CSS对多行文本框进行控制
<textarea rows="10" cols="30">
- type="button"创建一个可以按的按钮,但是如果不进行JS控制,按钮无效果
<input type="button" value="post">
- type="submit"创建一个可以提交表单的按钮,submit只要出现就可以对所在页面的表单信息进行提交,当然也可以直接做一个<button>提交</button>,这样的提交按钮只要在表单中即可实现提交的效果
<input type="submit" value="post">
- fieldset在周围的框中加入数据
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
- type="reset"创建一个重置表单信息的按钮,点击会重置所有填写的信息
<input type="reset" value="1">
- type="hidden"设置数据为隐藏,用户看不到,可以提高表单信息的安全性
<input name="csrf_token" type="hidden" value="a23dafd23444" />
- type="file"用户文件上传,可以设置规定格式
<input type="file" name="file1">