精华内容
下载资源
问答
  • 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表单

    2017-07-12 16:50:18
     HTML5 表单      1、表单用于获取不同类型的用户输入        2、常用表单标签    标签描述表单输入域textarea>文本域控制标签定义域域的标题选择列表group>选项组下拉列表中的选项按钮       3、常

    -----------------siwuxie095

      

      

      

      

      

      

      

      

      

    HTML5 表单

      

      

    1、表单用于获取不同类型的用户输入

      

      

      

    2、常用表单标签

      

    标签

    描述

    <form>

    表单

    <input>

    输入域

    <textarea>

    文本域

    <label>

    控制标签

    <fieldset>

    定义域

    <legend>

    域的标题

    <select>

    选择列表

    <optgroup>

    选项组

    <option>

    下拉列表中的选项

    <button>

    按钮

      

      

      

    3、常用表单

      

    复选框、单选按钮、下拉列表、文本域、创建按钮

      

      

      

      

      

      

      

      

      

      

    【made by siwuxie095】

    展开全文
  • 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 属性

    校验非空


    展开全文
  • HTML5 表单元素

    2020-12-13 19:11:57
    HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 元素 ...
  • HTML5基础教程第2版 授课教师 职务 第3章 HTML5表单及文件处理 课程描述 应用程序的基本功能 就是与用户进行交互 用户提交数据的最常 用方式是通过表单 除了可以使用表单传 送用户输入的数据 还可以用于上传文件 本...
  • modernizr html5表单提交按钮圆形进度条加载动画表单 modernizr html5表单提交按钮圆形进度条加载动画表单
  • 原标题:HTML5 表单元素HTML5 新的表单元素HTML5 有以下新的表单元素:注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 ...
  • form >1.2 标记标签< label >1.3 输入标签< input >1.4 列表标签< select >1.5 按钮标签<...2、HTML5表单API2.1 表单新增输入类型2.2 表单新增元素标签2.3 表单新增属性 1、HTML
  • js浏览器html5表单验证

    2020-10-21 07:58:44
    主要为大家详细介绍了js浏览器html5表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • HTML5表单使用总结

    2021-03-14 10:09:53
    HTML5表单介绍
  • HTML5表单验证

    2020-03-23 14:49:38
    HTML5表单验证 表单验证的两种方式: form表单提交到后台(学习这个) 无刷新页面的ajax提交(之前做过) HTML5约束验证API willValidate属性 willValidate: 指定 input 是否需要验证 ...
  • bootstrap风格的html5表单验证示例

    千次下载 热门讨论 2013-04-16 15:21:26
    bootstrap风格的html5表单验证示例
  • html5表单元素及验证

    2016-10-23 00:24:01
    自己总结的一些html5表单元素以及表单验证,希望对大家有用!!
  • html5表单属性The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores world...
  • 因此,在本文中,我们将使用HTML5表单创建登录页面,以查看新添加的功能如何工作。 演示版 下载源 HTML5输入 让我们看一下以下标记。 <section class="loginform cf"> <f...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,325
精华内容 6,130
关键字:

html5表单