精华内容
参与话题
问答
  • HTML5 表单

    2019-05-13 08:25:48
    HTML5 表单 1、表单作用 收集用户的信息并提交给服务器 2、表单的要素 form元素:收集用户的信息 表单控件:可以与用户进行数据交互的可视化组件 form元素 <form></form> 属性: ...

    HTML5 表单

    • 1、表单作用
      • 收集用户的信息并提交给服务器
    • 2、表单的要素
      • form元素:收集用户的信息
      • 表单控件:可以与用户进行数据交互的可视化组件

    form元素 <form></form>

    属性 取值 说明
    action 地址值 提交给服务器处理程序的地址,默认提交本页
    method
    get 向服务器要数据,显式提交,大小不超过2KB,默认值
    post 提交给服务器处理,隐式提交,无数据大小限制
    enctype
    application/x-www-form-unlencoded 允许所有的文本数据提交给服务器,默认值
    multipart/form-data 允许将文件提交给服务器
    text/plain 允许将普通字符提交给服务器,特殊字符不行

    表单控件

    • 只有放在<form>中才能提交服务器
    1、文本框 和 密码框
    • 文本框:<input type=‘text’>
    • 密码框:<input type=‘password’>
    属性 取值 说明
    name 字符串 为控件起名,在服务器上使用
    value
    字符串 控件上所显示的值
    maxlength
    数值 限制输入的最大字符数
    placeholder
    字符串 提示的占位符
    2、按钮
    • 1、提交按钮 <input type=‘submit’>
    • 2、重置按钮 <input type=‘reset’>
    • 3、普通按钮 <input type=‘button’>
    属性 说明
    value 字符串 设置按钮上的文字
    3、单选按钮 和 复选框
    • 1、单选按钮 <input type=‘radio’>
    • 2、复选框 <input type=‘checkbox’>
    属性 说明
    name 字符串 定义名称,并分组
    value 字符串 定义控件的值
    checked 设置预选中,该属性无值
    4、隐藏域 和 文件选择框
    • 1、隐藏域:提交给服务器但不显示给用户 <input type=‘hidden’>
    属性 说明
    name 字符串 定义名称
    value 字符串 定义控件的值
    • 2、文件选择框 <input type=‘file’ method=‘post’ enctype=‘multipart/form-data’>
    属性 说明
    name 字符串 定义名称
    • 注意:文本选择框的表单method值一定为post,且enctype值为multipart/form-data
    5、多行文本域
    • 多行文本域: <textarea> </textarea>
    属性 说明
    name 字符串 定义名称
    cols 数值 指定文本域的列数(文本框宽度)
    rows 数值 指定文本域的行数(文本框高度)
    6、下拉选项框
    • 1、下拉选项框:<select> </select>
    • 2、选项标记:<option> </option>
    标签 属性 说明
    <select> </select> name 字符串 定义名称
    <option> </option> value 字符串 提交服务器的内容
      <form action="login" method="post" enctype="multipart/form-data">
            <p>  <!-- 文本框 -->
                用户名称
                <input type="text" name="uname" maxlength="12" placeholder="请输入用户名">
            </p>
            <p>   <!-- 密码框 -->
                用户密码
                <input type="password" name="upwd" placeholder="请输入密码">
            </p>
            <p>  <!-- 按钮 -->
                <input type="submit">
                <input type="reset">
                <input type="button" value="返回">
            </p>
            <p>  <!-- 单选按钮 -->
            	性别:
                <input type="radio" name="sex" value="m"><input type="radio" name="sex" value="w"><input type="radio" name="sex" value="x" checked>保密
            </p>
            <p>  <!-- 复选框 -->
            	爱好:
                <input type="checkbox" name="hobby" checked>游泳
                <input type="checkbox" name="hobby">看书
                <input type="checkbox" name="hobby">旅游
            </p>
            <p>  <!-- 隐藏域 -->
                <input type="hidden" name="uid" value="123456789">
            </p>
            <p>  <!-- 文本选择框 -->
                上传头像:
                <input type="file" name="hphoto">
            </p>
            <p>  <!-- 多行文本域  -->
                <textarea name="info" cols="30" rows="10"></textarea>            
            </p>
            <p>  <!-- 下拉选项框  -->
                选择城市
                <select name="city" >
                    <option value="BJ">北京</option>
                    <option value="TJ">天津</option>
                    <option value="SH">上海</option>
                    <option value="CQ">重庆</option>
                </select>
            </p>
        </form>
    
    展开全文
  • HTML5表单

    千次阅读 2018-07-25 16:50:32
    H5提供的表单类型,具备数据验证的功能,但是验证的功能不严谨! 后期会用正则表达式来处理! --&gt; 邮箱: &lt;input type="email"/&gt; &lt;br/&gt; 网址:
    <form action="" style="text-align: center">
        <!--
        H5提供的表单类型,具备数据验证的功能,但是验证的功能不严谨!
        后期会用正则表达式来处理!
        -->
        邮箱:
        <input type="email"/>
        <br/>
        网址:
        <input type="url"/>
        <br/>
        日期:
        <input type="date"/>
        <br/>
        时间:
        <input type="time"/>
        <br/>
        月份:
        <input type="month"/>
        <br/>
        周:
        <input type="week"/>
        <br/>
        数字:
        <input type="number"/>
        <br/>
        滑动:
        <input type="range"/>
        <br/>
        颜色:
        <input type="color"/>
        <br/>
        <input type="submit"/>
    </form>

     

    展开全文
  • html5表单

    2018-08-30 22:16:12
    表单语法 &lt;form method="post" action="result.html"&gt;  &lt;p&gt; 名字:&lt;input name="name" type="text" &gt; &lt;/p&...

    表单语法

    <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 表单

    2015-08-12 15:41:26
    表单主要的输入类型 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

    表单主要的输入类型

    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 属性

    校验非空


    展开全文
  • js浏览器html5表单验证

    2020-11-27 08:53:27
    html5表单添加了很多类型的表单,而且还自带验证的功能。在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘 但是由于不同的浏览器对不合法输入提示文案不一致,样式也不一样,并且老...
  • HTML5 表单属性

    千次阅读 2016-06-28 20:15:30
    1、HTML5 新的表单属性 HTML5 的 和 标签添加了几个新属性.  新属性:autocomplete、novalidate  新属性:autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、...
  • HTML5 表单元素

    2016-06-28 20:05:38
    1、HTML5 新的表单元素  HTML5 有以下新的表单元素:、、注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 2、HTML5 元素  元素...
  • HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 本章全面介绍这些新的输入类型: email url number range Date pickers (date, month, week, time, datetime, datetime-local) search...
  • HTML5表单中password输入框的文字显示与隐藏实现

    万次阅读 多人点赞 2016-03-11 09:47:26
    HTML5表单中对于密码输入框password类型可以隐藏用户输入的内容,但有时候会用到允许用户自由显示或者隐藏输入框内容: 要实现这个功能首先想到的是用js动态改变input的type类型,觉得将type = password变成...
  • 本文主要对HTML5表单新增属性进行详细介绍,并附上实例解析,简单易懂。需要的朋友一起来看下吧
  • html5表单元素及验证

    2016-10-23 00:24:01
    自己总结的一些html5表单元素以及表单验证,希望对大家有用!!
  • HTML5表单_表单属性

    千次阅读 2016-04-16 10:19:46
    HTML5新的表单属性
  • HTML5表单_表单元素

    2016-04-15 07:43:28
    HTML5的新表单元素
  • HTML5: HTML5 表单元素

    2018-04-19 11:33:00
    ...HTML5表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <keygen> <output> 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可...
  • form >1.2 标记标签< label >1.3 输入标签< input >1.4 列表标签< select >1.5 按钮标签<...2、HTML5表单API2.1 表单新增输入类型2.2 表单新增元素标签2.3 表单新增属性 1、HTML

空空如也

1 2 3 4 5 ... 20
收藏数 11,627
精华内容 4,650
热门标签
关键字:

html5 表单