HTML中form表单的用法

2017-03-24  本文已影响0人  饥人谷_tanfei

<form> 标签用于为用户输入创建 HTML 表单。

常见的表单元素

  1. type="text",用于对文本域进行文本的输入

<input type="text" name="firstname">

  1. type="password",用户进行密码的输入,隐藏输入内容

<input type="password" name="password">

  1. type="checkbox",用户进行复选按钮操作加上checked时会默认选中

<input type="checkbox" name="Bike">

  1. type="radio",用户进行单选按钮操作,当name相同时为同一组单选按钮

男性:<input type="radio" checked="checked" name="Sex" value="male" />
女性:<input type="radio" name="Sex" value="female" />

  1. 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>

  1. type="textarea"用户在多行文本框中进行输入,输入框可以任意伸缩,可以用CSS对多行文本框进行控制

<textarea rows="10" cols="30">

  1. type="button"创建一个可以按的按钮,但是如果不进行JS控制,按钮无效果

<input type="button" value="post">

  1. type="submit"创建一个可以提交表单的按钮,submit只要出现就可以对所在页面的表单信息进行提交,当然也可以直接做一个<button>提交</button>,这样的提交按钮只要在表单中即可实现提交的效果

<input type="submit" value="post">

  1. fieldset在周围的框中加入数据

<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>

  1. type="reset"创建一个重置表单信息的按钮,点击会重置所有填写的信息

<input type="reset" value="1">

  1. type="hidden"设置数据为隐藏,用户看不到,可以提高表单信息的安全性

<input name="csrf_token" type="hidden" value="a23dafd23444" />

  1. type="file"用户文件上传,可以设置规定格式

<input type="file" name="file1">

上一篇下一篇

猜你喜欢

热点阅读