• 技术文章 >web前端 >html教程

    全方位整理与form表单相关的元素!

    藏色散人藏色散人2022-08-05 11:47:32转载185

    HTML原有的表单以及表单控件

    form元素

    <form…/>元素不会生成可视化部分。可以置顶id、class、style等核心内容,还可以指定onclick等事件属性。

    除此之外还包括action(指定当单机表内确定按钮时,该表单跳转到那个地址)、method(指定提交表单时发送何种类型请求,值可以为get或者post)、enctype(指定对表达内容进行编码所使用的字符集)、name(指定表单的唯一名称)、target(指定个适用哪种方式打开目标URL)。【推荐:HTML视频教程

    input元素

    <input…/>元素是表单控件元素中功能最丰富的,下面是几种input元素生产的:

    密码输入框:

    <input id="password" name="password" style="password" />

    隐藏域:

    <input id="hidden" name="hidden" style="hidden" />

    单选框

    <input id="radio" name="radio" style="radio" />

    复选框

    <input id="checkbox" name="checkbox" style="checkbox" />

    图像域

    <input id="image" name="image" style="image" />

    文件上传域

    <input id="file" name="file" style="file" />

    提交按钮

    <input id="submit" name="submit" style="submit" />

    重设按钮

    <input id="reset" name="reset" style="reset	" />

    无动作按钮

    <input id="button" name="buton" style="button" />

    <input …/>的一些焦点属性

    checked:设置单选框、复选框初始是否处于被选中状态。
    disabled:设置首次加载时用此元素。
    maxlength:该属性是一个数字,指定文本框中所允许输入的最大数字。
    readonly:指定文本框内的值不允许用户修改(可使用js脚本修改)。该属性是支持boolean值的属性,表示该元素的值是只读的。
    size:该属性值是一个数字,指定钙元素的宽度。
    src:指定图像域所显示图像的URL.
    width:指定图像域所显示图像的宽度。
    heigeht:指定图像域所显示图像的高度。

    label元素

    label元素可以指定id、class、style等核心属性,也可以指定onclick等事件属性。除此之外,还可以指定一个for属性,该属性指定该标签与那个表单控件关联。用法为for="",引号内为相关控件的id。

    button元素

    <button…/>元素用于定义一个按钮,可以指定id、class、style等核心熟悉,还可以定义onclick等事件属性。除此之外,还可以指定如下几种元素。

    disabled:指定是否禁用此按钮。
    name:制定该按钮的唯一名称,该属性名称应该与id保持一致。
    type:指定该按钮属于那种按钮,该属性值只能是button、reset或submit其中之一。
    value:指定该按钮的初始值。可以通过js脚本进行更改。

    select与option元素

    <select…/>元素用于创建列表框或下拉菜单,钙元素必须和<option…/>元素结合适用,每个<option…/>元素代表一个列表项或菜单项。
    <select…/>元素可以指定id、class、style等核心属性,该元素尽可以指定onchange事件属性——当该列表框或者下拉列表项内的选中选项发生改变时,出发onchange事件。

    除此之外,<select…/>元素还可以指定如下几个属性。

    disabled:设置禁用该列表框和下拉菜单。该属性的值只能是disabled或者省略属性值。
    multiple:设置该列表框和下拉菜单是否允许多选。一旦设置允许多选<select…/>元素就会自动生成列表框。
    size:指定该列表框和下拉菜单可同时实现多少个列表项。一旦设置允许多选<select…/>元素就会自动生成列表框。

    在<select…/>元素里,只能包含如下两种子元素。

    <option…/> :用于定义列表项或者菜单项。该元素里只能包含文本内容作为该选项的文本。
    <optgroup…/>:用于定义列表项或者菜单线组。该元素只能包含<option…/>子元素。

    <option…/>元素可以指定id、class、style等核心元素还可以指定onclick等事件属性。

    除此之外还可以定义如下几种元素。

    disabled:指定禁用该选项,该属性的值只能为disabled。
    selected:指定该流标箱初始状态是否处于被选中状态。该属性的值只能是selected。
    value:指定该选项对应的请求参数值。

    <optgroup…/>元素可以指定元素可以指定id、class、style等核心属性,还可以指定onclick等事件响应属性。除此之外还有如下几个属性。

    label:指定该选项组的标签。这个属性必填。
    disabled:设置禁用该选项组里的所有选项。该属性值只能是disabled或者省略该属性值。

    HTML5增强的textarea

    <textarea…/>元素用于生成多行文本域。<textarea…/>可以指定id、class、style等核心元素,还可以指定onclick等事件属性。由于textarea的特殊性,它可以接收用户输入,用户可以选中文本域内的文本,所以还可以指定onslect、onchange两个属性,分别应用于文本域中被选中、文本被修改时间。除此之外,该元素还可以指定如下元素。

    cols:指定文本域的宽度,属于必填项。
    rows:指定文本的高度,属于必填项。
    disabled:指定禁用该文本域。该属性值只能为disabled。
    readonly:指定文本域只读。该属性值只能为readonly。
    maxlength:设置该多行文本域最多可以输入的字符数。
    wrap:指定多行文本域是否添加换行符。该属性支持soft和hard两个属性值。如果将属性值设置为hard,则必须指定cols属性,如果输入的字符超过了cols指定宽度导致文本换行,那么提交该表单时该多行文本域将会自动在换行处添加换行符。

    fieldset与legend元素

    <fieldset…/>元素可用于对表单内表单元素进行分组。,该元素可以指定id、class、style等核心元素,还可以指定如下三个属性。

    name:指定该<fieldset…/>元素的名称。
    form:该属性的属性值必须是一个有有效的<form…/>元素的id,用于指定该<fieldset…/>元素属于该表单。
    disabled:该属性用于禁用该表单元素。该属性是一个支持boolean值的属性。

    HTML新增的表单属性

    form的表单属性

    html5为所有表单控件都新增了form属性,因此在页面上定义表单控件时更加灵活,可以随意的防止、排列表单控件,这位页面布局提供了更大的灵活性。

    formaction属性

    html5为处理同一表单中同时包含注册、登录两个按钮的问题,对于sumit、reset、image都可以指定formaction,该属性即可动态的让表单提交到不同的URL。

    formxxxx属性

    formxxxx属性类似于formaction属性,对于sumit、reset、image都可以指定formenctype、formmethod、formtarget等属性,其中:

    formenctype:该属性可以让按钮动态的变成enctype属性。
    formmethod:该属性可以让按钮动态的变成method属性。
    formtarget:该属性可以让按钮动态的变成target属性。

    autofocus属性

    这是一个非常常用的属性,作用就是在打开网页的时候自动聚焦到对应的位置。用法为添加到对对应的代码中,如:<input type="password" name="name" autofocus />该代码中autofocus的作用就是在打开网页时自动聚焦到该密码框。

    placeholder属性

    这个属性也非常的常用,作用就是在用户为输入数据的文本框中给出对应的提示,如:<input type="text" name="username" palceholder="请输入用户名" />;该代码中palceholder的作用就是在用户未在文本框中输入数据是显示请输入用户名,使页面更加的人性化。

    list属性

    该属性也非常的实用,在html5规范之前html表单属性是没有有类似于ComboBox的组件的。html5的list属性刚好弥补了这个不足,list属性的值应该是一个<datalist…/>组件的id,也就是说list必须与<datalist…/>元素结合使用。

    <datalist…/>元素相当于一个看不见的<select…/>元素,用于生成一个隐藏的下拉菜单。<datalist…/>所能包含的子元素与<select…/>元素相同。该元素用于与指定的了list属性的<input…/>元素结合使用。当双击list属性的文本框时,显示<datalist…/>生成的下拉菜单。

    autocomplete属性

    该输赢用于控制在点击文本框时是否自动显示之前的填写历史,浏览器默认启动该功能,该属性支持两个属性值:

    on:打开autocomplete,文本框下方会显示下拉菜单。
    off:关闭autocomplete,文本框下方不会显示下拉菜单。

    label的control属性

    html5为<label…/>元素提供了一个control属性,该属性用于在javascropt脚本中访问该<label…/>元素所关联的表单元素。

    表单中的labels属性

    表单元素与<label…/>元素之间具有一对多的相关联关系,<label…/>元素获取他关联的表单元素适用control属性,而表单元素获取与他相关联的<label…/>元素适用labels属性。

    文本框中的selectionDirection属性

    html5为单行文本框和多行文本域新增了一个selectionDirection只读属性,该属性用于返回文本框内的文字方向。

    HTML5新增的表单元素

    功能丰富的input元素

    HTML5为<input…/>元素新增了如下几种可能的类型。

    color:生成一个颜色选择器,value的值为形如#xxxxxx的颜色值。
    date:生成一个日期选择器。
    time:生成一个时间选择器。
    datetime-local:生成一个本地日期、时间选择器。
    week:生成一个供用户选择第几周的文本框。
    month:生活猜呢个一个月份选择器。
    max:指定日期时间的最大值。
    step:指定日期、时间的步长。
    email:生成一个E-mail输入框,浏览器会自动检查输入的E-mai是否符合格式。

    multiple:该属性支持boolean类型,如果指定了该属性值,则表示允许输入多个E-mail地址,用英文逗号隔开。

    tel:生成一个输入电话号码的文本框。
    ur:生成一个输入URL的文本框,浏览器会自动检查输入的URL是否符合格式。
    number:生成一个只能输入数字的文本框。

    min:指定数值的最小值。
    max:指定数值的最大值。
    step:指定数字的步长。

    range:生成一个拖动条,还会有如下的属性:

    min:该拖动条的最小值。
    max:该拖动条的最大值。
    step:指定拖动条的步长。

    search:生成一个专门用于输入搜索关键字的文本框。

    output元素

    HTML5新增了一个<output…/>表单控件,该元素用于显示输出。该元素除了可以指定id、class、style等核心属性外还可以指定如下属性。

    for:该属性制动该元素将会显示那个或者那些元素的值。

    meter元素

    HTML5还新增了一个<meter…/>元素,该元素表示一个已知最大值和最小值的计数仪表。该元素出了可以定义id、class、style等核心熟悉外,还可以定义如下的属性。

    value:指定计数仪表的当前值。默认为0.
    min:指定计数仪表的最小值,默认为0.
    max:指定计数仪表的最大值。默认为1.
    low:指定计数仪表指定范围的最小值,必须大于等于min的值。
    high:指定计数仪表指定范围的最大值,必须小于等于max的值。
    optimum:指定个计数仪表有效范围的最佳值。

    progress

    <progress…/>元素用于表示一个进度条。该元素除了可以指定id、class、style等核心属性外还可以指定如下的属性。
    max:指定进度条完成时的值。
    value:指定当前完成的进度值。

    HTML5新增的客户端校验

    使用校验属性执行校验

    HTML5为表单控件添加了如下几种校验属性。

    required:该属性指定该表单控件必须填写。
    pattern:该属性指定该表单控件的值必须符合指定的正则表达式。
    min、max、step:这三个属性只对数值类型、日期类型的<input…/>元素有效,这个元素必须在min~max之间,并符合step步长。

    调用checkValidity方法进行校验

    关闭校验

    以上就是全方位整理与form表单相关的元素!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:form
    上一篇:详解HTML内联标签iframe的使用! 下一篇:没有了
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• html中如何设置form大小• 如何解决html form乱码问题• form在html中是什么意思• 十分钟搞懂form标签中的GET和POST提交方式
    1/1

    PHP中文网