学习input

   认识input;

在网页中,我们经常都会遇到一些交互页面,比如登录、注册、评论等页面。你知道在html中用的是那些标签吗?今天我们要学习的就是其中最主要的一个标签,即<input>标签。

在html中,<input>标签是使用来定义一个输入字段,用来搜集用户信息;

<input>标签有一个重要的属性,type属性,该属性规定输入字段的方式,比如:文本域、单选框、复选框、按钮等等;

<input>标签通常用在form表单中(即<form>标签中),用来搜集需要提交或验证的信息;

<input>标签可以使用<label>标签来定义标注,点击<label>标签中的内容会自动将焦点转到和标签相联系的表单控件上;

   input标签:

在html5中已经废弃了align属性,不建议使用,可以使用css来控制input元素的对齐方式。同时在html5版本中为<input>标签新增了很多属性,如下:

accept:通过文件上传来提交的文件的类型;alt:图像输入的替代文本;autocomplete(html5新增):是否使用输入字段的自动完成功能,值:on、off;autofocus(html5新增):输入字段在页面加载时获得焦点,值:autofocus(type="hidden"不适用);checked:input元素首次加载时被选中,值:checked;disabled:input元素加载时禁用此元素,值:disabled;form(html5新增):输入字段所属的一个或多个表单,值:表单的name;formaction(html5新增):覆盖表单的action属性(type="submit" 和 type="image"时可用);formenctype(html5新增):覆盖表单的enctype属性(type="submit" 和 type="image"时可用);formmethod(html5新增):覆盖表单的method属性,值:get、post(type="submit" 和 type="image"时可用);formnovalidate(html5新增):覆盖表单的novalidate属性,如果使用该属性,则提交表单时不进行验证;formtarget(html5新增):覆盖表单的target属性,值:_blank、_self、_parent、_top、framename(type="submit" 和 type="image"时可用);height(html5新增):input 字段的高度(type="image"时可用);list(html5新增):引用包含输入字段的预定义选项的datalist;max(html5新增):输入字段的最大值,一般是和"min" 属性配合使用,来创建合法值的范围;maxlength:输入字段中的字符的最大长度;min(html5新增):输入字段的最小值;一般是和"max" 属性配合使用,来创建合法值的范围;multiple(html5新增):如果使用该属性,则允许一个以上的值,值:multiple;name(html5新增):定义input元素的名称;pattern(html5新增):输入字段的值的模式或格式(如:pattern="[0-9]",表示输入值必须是0与9之间的数字);placeholder(html5新增):帮助用户填写输入字段的提示;readonly:输入字段为只读,值:readonly;required(html5新增):输入字段的值是必需的,值:required;size:输入字段的宽度;src:以提交按钮形式显示的图像的 URL;step(html5新增):输入字的的合法数字间隔;type:input 元素的类型,值:button、checkbox、file、hidden、image、password、radio、reset、submit、text;value:input元素的值。width(html5新增):input字段的宽度(type="image"时可用);

 input实例;

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html中input标签的详细介绍</title></head><body bgcolor="bisque"><form action="">用户名:<input type="text" name="userName"><br>密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pw"><br><input type="checkbox" name="RbPw" id="RbPw"><label for="RbPw">记住密码</label><br><input type="submit" value="登录"></form></body></html>

猜你喜欢

转载自www.cnblogs.com/feng-lin/p/12076028.html
今日推荐