有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

html5新增的表单元素有哪些

代码编程 cat 11个月前 (10-28) 35次浏览 已收录 0个评论 扫描二维码

placeholder属性

作用:提供一种输入提示,描述输入域所期待的值

代码示例

<input type="text" placeholder="请输入手机号码">

minmax step 属性

作用:

max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔

代码示例

<input type="number" value="4" min="2" max="10" step="2">

提示

适用于range和 number类型

autofocus属性

作用:规定在页面加载完成时,自动地获得焦点

代码示例

<input type="text" autofocus>

autocomplete属性

作用:当表单元素获取焦点时,会提供选项列表,以供用户选择自动填充

取值

on ( 开启)

off ( 关闭 )

代码示例

<form action="">
     <input type="text" name="username" autocomplete="off">
     <input type="submit" value="提交">
</form>

提示:【该功能与浏览器本身的设置】有关,可能需要首先启用浏览器本身的自动完成功能,才能

使autocomplete属性起作用

required 属性

作用:规定必须在提交之前验证输入域(不能为空),为空则弹出提示,无法提交

代码示例

<form action="">
     <input type="text" name="testname2" required> 
     <input type="submit" value="提交">
</form>

pattern 属性

作用:用于验证 input 域的模式,

提交时会根据指定的模式对输入的值进行验证,

输入合法可以提交输入不合法弹出提示,无法提交

代码示例

<form action="">
     <input type="text" name="testname2" pattern="[0-9]"> 
     <input type="submit" value="提交"> 
</form>

multiple 属性

作用:规定输入域中可选择多个值;

一般用于上传域和email类型的输入域。

用于email域

默认email域不支持输入多个email地址,用于email之后则允许输入多个逗号隔开的email地

用于fifile域

默认fifile类型只支持选择单个文件来上传,

新增的multiple属性可以使它一次性选择多个文件。

代码示例

<form action="">
     email域: <input type="email" name="testemail" multiple>
     文件域: <input type="file" name="testfile" multiple>
     <input type="submit" value="提交">
</form>

form 属性

作用:规定表单元素所从属的表单区域form

语法:

form 属性必须引用所属表单区域的 id

注意:一个输入只能与一个表单相关联。

代码示例

<form action="#" id="form1">
     <input type="text" name="username"/>
</form>
     <input type="reset" form="form1">
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址