您的位置：首页 > Web前端 > HTML

html表单所有类型

2016-09-06 01:50 309 查看 
<span style="font-size:24px;"><!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>表单输入框的类型</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--对于整个表单来说有很多浏览器自带的属性我们在写网站的时候需要去除默认的，写自己的一些属性 + novalidate为tue表示整个表单将不采用默认验证
+ enctype 设置是表示数据发送到服务器之前如何对表单数据进行编码（上传文件的表单使用multipart/form-data + text/plain只对特殊的字符编码 + application/x-www-form-urlencoded对所有的进行编码）
-->
<form name="inputTypeForm" id="typeForm" novalidate="true" enctype="text/plain">
<!--最常用的输入框的类型 + autofocus属性用于表单自动获得焦点 + pattern支持表单自定义正则表达式验证 + required必填项用required控制-->
<input type="text" name="name" autofocus="autofocus" pattern="[A-z]{3}" required="required">
<!--主要用于输入密码会隐藏显示的内容-->
<input type="password" name="pass">
<!--显示button按钮-->
<input type="button" name="确定">
<!--表单的提交按钮 + formnovalidate为true时是对该项免去浏览器默认的验证 + formaction存在值得时候是对当前的表单重新选择提交路径-->
<input type="submit" value="提交"  formnovalidate="true" formaction="demo_admin.asp" >
<!--重置表单的按钮-->
<input type="reset" value="重置">
<!--单选按钮让用户只选其一-->
<input type="radio" name="sex" value="man">
<input type="radio" name="sex" value="woman">
<!--表单的多选框-->
<input type="checkbox" name="white" value="white">
<input type="checkbox" name="blue" value="blue">
<!--用于定义隐藏字段-->
<input type="hidden" name="city" value="city">
<!--用于用户选择文件上传 + multiple 支持多选、默认情况下是单选-->
<input type="file" multiple="multiple">
<!--不提倡使用type=image作为表单的提交按钮要结合alt src使用。提交时会将按钮的x/y坐标提交上去 + width、height是css3新加的属性 -->
<input type="image" src="http://demo.jb51.net/js/2015/jquery_lunbo/images/4.jpg" alt="submit" width="99" height="99">

<!--新增控件类型 下面是html5新加的表单类型，使得html更加的强大 可以设置最小值、最大值和每次点击跳的步数-->
<input type="number" min="0" max="10" step="3">
<!--自带的邮箱输入框已经做好了验证-->
<input type="email" placeholder="请输入邮箱">
<!--如果想要输入一个连接通过url来控制-->
<input type="url" placeholder="请输入链接">
<!--可以选择颜色-->
<input type="color" placeholder="请选择颜色">
<!--可以选择范围-->
<input type="range" placeholder="请选择范围">

<!--日期的选择当然时间这块的类型有点多  date/month/week/time/datetime-->
<input type="date" placeholder="请选择时间">

<!--html5新加的列表标签、更形象化 相当于自己封装了一个select-->
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
</form>
<!--在form表单之外但是一样是属于id为typeForm的表单 + 但所属为多个form的时候各个id用空格分割开-->
<input type="text" name="nickname" form="typeForm">
</body>
</html></span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航