html5 后台 表单
2015-08-12 15:41:26 heyanfeng22 阅读数 230

表单主要的输入类型

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No
   

Input 类型 - Date Pickers(日期选择器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间(小时和分钟)
  • datetime - 选取时间、日、月、年(UTC 时间)
  • datetime-local - 选取时间、日、月、年(本地时间)




表单元素
dataList元素

类似于一个下拉框

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:



<span style="font-size:18px;">Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist></span>


keygen 元素


加密工具

<span style="font-size:18px;"><form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form></span>

返回的是加密的字符串



HTML5 的新的表单属性


新的 form 属性:

  • autocomplete
  • novalidate

新的 input 属性:

  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height 和 width
  • list
  • min, max 和 step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

autocomplete

autocomplete="on/off"     on 表示自动之前的记录值,off表示不自动填充上次记录值
 

autofocus 属性


<input type="text" name="user_name" autofocus="autofocus" />

页面展示的时候自动获取焦点,如果同时有两个,默认第一个得到焦点


form

<span style="font-size:18px;"><form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" /></span>

通常的只会提交form表单范围内的,在input中使用新的form属性,也能一起提交


list属性
当有datalist的时候,类似于上面的下拉框

multiple属性
当input上传文件的时候multiple=“multiple”,用于type 等于email或者file,type=“file”是上传文件,加了这一行,只能选择一个文件

novalidate 属性

novalidate =“novalidate ”加了则一行,之前的email,url等校验无效



pattern 属性


正则校验
<span style="font-size:18px;"><input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" /></span>

placeholder 属性

类似于value的属性,但是不会提交,只是提示

required 属性

校验非空


2016-09-17 20:52:00 weixin_34007886 阅读数 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- <form action="http://h123.date" method="get"> -->
    <form action="http://h123.date" method="post" target="_blank">
        用户名:    <input type="text" name="bm" name="user" value="请输入用户名">
        密码:<input type="password"  name="pass" name="password">
        <input type="submit"><input type="reset">
    </form>
    <br>
    <div>
        <input type="text" maxlength="5">
        <input type="password">
        <input type="submit" value="确定">        
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/houweidong/p/5879645.html

2016-11-21 20:02:03 gyq04551 阅读数 350
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*<!-- 属性设置同html5-->*/
        /*form{*/
            /*width: 100%;*/
            /*/!* 最大宽度*!/*/
            /*max-width: 640px;*/
            /*/!* 最小宽度*!/*/
            /*min-width: 320px;*/
            /*margin:0 auto;*/
            /*font-family: "Microsoft Yahei";*/
            /*font-size: 20px;*/
        /*}*/

        /*input,meter,progress{*/
            /*display: block;*/
            /*width: 100%;*/
            /*height:30px;*/
            /*margin:10px 0;*/
        /*}*/
    </style>
</head>
<body>
<!-------------------------表单的类型-------------------------------->
<!-- type:表单的类型-->
<!--<input type="file" />-->
<form action=""><!--action 提交表单的地址-->
    <fieldset>
        <legend>表单属性</legend><!--表单大外框名称-->
            <label for="ee"><!--for跟的是Id值 可以喝input里面的Id值关联 点击名称 自动获取焦点-->

                <!-- 邮箱属性 自动验证输入是否有误 ”邮箱可以“用中文 也可以用英文不影响判断-->
                邮箱:<input type="email" name="email" id="ee"/>
            </label>
            <!-- url属性 也会验证网址输入是否有误-->
            <label for="">
                url:<input type="url" name="url" id="" >
            </label>

            <label for="">
                <!-- 数字类型 step=3 输入的数字为3的倍数默认上下拉滚动条-->
                number:<input type="number" name="number" step="3"/>
            </label>

            <label for="">
                <!-- 在浏览器上栏显示输入内容-->
                tel:<input type="tel" name="tel"/>
            </label>
            <label for="">
                <!-- 搜索框 输入内容被提交到浏览器地址栏-->
                search: <input type="search" name="search"/>
            </label>

            <label for="">
                <!-- range进度条 定义最小值 最大值 -->
                range: <input type="range" name="range" value="100" min="0" max="300"/>
            </label>

            <!-- time,date-->
            <label for="">
                <!-- 时间格式 -->
                time:<input type="time" name="time"/>
            </label>

            <label for="">
                <!-- date年月日 带下拉列表弹出日历功能  可以选择-->
                date: <input type="date" name="date" />
            </label>

            <label for="">
                month: <input type="month" name="month" />
            </label>

            <label for="">
                week: <input type="week" name="week" />
            </label>

            <input type="submit" value="提交"/>
    </fieldset>
</form>



<!-----------------------------------------智能下拉表单--------------------------------------------->
                <select >
                    <option>选项1</option>
                    <option>选项1</option>
                    <option>选项1</option>
                    <option>选项1</option>
                </select>
                <br/><br/><br/>
                <!--  一个普通的输入框-->
                <!-- 通过list=car 跟下面的 datalist标签中的id值进行关联-->
                <input type="text" list="car" />

                <!-- datelist为下拉菜单标签-->
                <!--数据列表标签-->
                <datalist id="car">
                    <option>宝马</option>
                    <option>宝骏</option>
                    <option>宝强</option>
                    <option>宝宝</option>
                    <option>奥迪</option>
                    <option>奥迪奥</option>
                    <option>迪奥</option>
                </datalist>



<!-------------------------------------表单元素-------------------------------------------->
<form action="">
    <fieldset>
        <legend>表单元素</legend>
        <label>
            用户名:<input type="text" name="userName" />
        </label>

        <label>
            <!--密码属性-->
            密码:<input type="password" name="pwd" />
        </label>
        <label >
            性别:<input type="text" name="sex" list="sex" />
        </label>

        <!-- 定义数据列表-->
        <datalist id="sex">
            <option >男</option>
            <option >女</option>
            <option >不祥</option>
            <option >其它</option>
        </datalist>

        <label for="">
            推荐人:<output>春哥</output>
        </label>
        <br/><br/>
        <label for="">
            加密类型: <keygen/>
        </label>
        <br/><br/>
        <label for="#">
            度量器:<meter value="50" max="100" min="0" low="30" high="80"></meter>
        </label>
        <!-- 进度条-->
        <progress value="40" max="100" min="0"></progress>
        <!-- progress 进度条 progress progress progress 进度条progress 进度条
        progress 进度条 -->
        <input type="submit" value="提交"/>
    </fieldset>
</form>

<!-----------------------------------表单属性-------------------------------------------------------->

            <!--<!– 表单新增属性–>-->
            <!--<input type="text" class="name" />-->
            <!--
                placeholder:提示文字(占位符)
                autofocus:自动获取焦点
                autocomplete: 自动完成(填充的) on 开启(默认)  off 取消自动提示
                required: 必填
                multiple: 多选
                novalidate:关闭默认的验证功能(只能加给form)
                pattern: 自定义正则验证
                pattern="1\d{10}"
            -->
    <!--<form action="" novalidate>-->
    <form action="" >
        <fieldset>
            <legend>表单属性</legend>
            <label for="">
                <!--  placeholder:提示文字(占位符)   autofocus:自动获取焦点 应用-->
                用户名:<input type="text" placeholder="例如:李狗蛋" autofocus name="userName" autocomplete="on" required/>
            </label>
                <!--  pattern: 自定义正则验证 pattern="1\d{10}" 应用-->
            <label for="">
                电话:<input type="tel" pattern="1\d{10}" />
            </label>

            <!-- 上次文件-->
            <input type="file" name="file" multiple/>

            <input type="submit" />
        </fieldset>
    </form>



</body>
</html>

2019-05-15 13:56:00 weixin_30556161 阅读数 4

                                          HTML5新增表单控件和表单属性

一、Forms:新的输入型控件;

 1.(1)email:电子邮箱文本框,跟普通的没区别;

     

      

   当输入的不是邮箱的时候,验证不通过

    移动端的键盘会有变化

 (2)Tel:电话号码

    tel的功能主要在移动端上,一个键盘的切换

 (3)url网页的URL 网址

    

     

 (4)search 搜索引擎

    chrome下输入文字后,会多出一个关闭的×;

    

    

 (5)range 特定范围内的数值选择器;      

     min max step(步数)

   

    

 (6)number 只能包含数字的输入框;

   

  

 (7)color 颜色选择器;

   

   

 (8)datetime 显示完整日期(opera浏览器下起作用)

    chrome浏览器下:date

     

   

 (9)datetime-local:显示完整日期,不含时区;

   

 (10)time 显示时间,不含时区

 (11)date:显示日期

 (12)week:显示周

 (13)month:显示月

 2.新的表单特性和函数

  (1)placeholder:输入框提示信息;

   

   

  (2)autocomplete:是否保存用户输入值(默认为on,关闭提示选择off)

   

  (3)autofocus:指定表单获取输入焦点

   

     

  (4)required:此项必填,不能为空

    

    

  (5)pattern:正则验证 pattern="\d{1.5}"

    

      

  (6)formaction 在submit里定义提交地址(只在Opera浏览器下有作用)

  (7)表单验证:validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false;

      -oText.addEventListener("invalid",fn1,false)

 

转载于:https://www.cnblogs.com/yuanjingjing/p/10868366.html

2018-08-30 22:16:12 weixin_42425900 阅读数 367

表单语法

<form  method="post" action="result.html">

   <p>  名字:<input name="name" type="text" >  </p>

   <p>  密码:<input name="pass" type="password" >  </p>

   <p>

      <input type="submit" name="Button" value="提交"/>

      <input type="reset" name="Reset" value="重填“/>

   </p>

</form>

 

 表单元素格式

input  type="text"  name="fname" value="text"/>

属性

说明

type

指定元素的类型textpasswordcheckboxradiosubmitresetfilehiddenimage button默认为 text

name

指定表单元素的名称

value

元素的初始值type radio必须指定一个值

size

指定表单元素的初始宽度 type text password,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位

maxlength

typetext password 时,输入的最大字符

checked

typeradiocheckbox时,指定按钮是否是被选中 

表单元素

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

 

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label>

<input type="radio" name="gender" id="male"/>

 

placeholder

input类型的文本框提供一种提示(hint

可以描述文本框期待用户输入何种内容

提示语默认显示当文本框中输入内容时提示语消失

适合于input标签:textsearchurlemailpassword等类型

 

required

规定文本框填写内容不能为空,否则不允许用户提交表单

适合于input标签textsearchurlemailpasswordnumbercheckboxradiofile等类型

 

pattern

用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

常用的表单元素

文本框(text

密码框(password

单选按钮(radio

复选框(checkbox

列表框(<select><option>

按钮(buttonsubmitreset

邮箱(<email>

网址<url>

数字<number>

滑块<range>

搜索<search>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML5之表单

阅读数 2457

HTML5 表单

阅读数 138

HTML5之表单

阅读数 89

HTML5表单

阅读数 695

html5表单

阅读数 2

没有更多推荐了,返回首页