HTML之<input>元素详细介绍

简介: 一篇了解input元素

<label>标签:

    • 此标签为input元素定义标记,label元素不会向用户呈现任何特殊效果,当用户选择此便签时,浏览器会自动将焦点转到标签相关的表单控件上。
    • label标签的for属性应当与相关元素的id属性相同。

    属性:

    (1)for属性:规定label与哪个表单元素绑定。

    <label for="male">Male</label><!--绑定元素的id-->
    <input type="radio" name="sex" id=male">

    image.gif

      • 显式形式:<label>标签下的for属性命名一个目标表单id。
      <label for="SSN">social</label>
      <input type="text" name="numb" id="SSN"/>

      image.gif

        • 隐式形式:将表单控件为标记标签的内容。
        <label>Data of : <input type="text" name="DEF" /></label>

        image.gif

        (2)form属性:规定label所属的一个或多个表单。

        form属性值必须是其所属的表单的id,若引用一个以上的表单,请使用空格分隔的列表。

        <form id="nameform">
            <label for="name" form="nameform">male</label>
            ……
        </form>

        image.gif


        你们的魔鬼来咯。321

        <input>元素的属性

        1、accept属性 (只能与<input type="file">配合使用)

        该属性规定能够通过文件上传进行提交的文件类型。(避免使用此属性,应该在服务器端验证文件上传。)

        <input type="file" accept="image/gif"><!--image/gif为文件类型>

        image.gif

        2、align属性(只能与<input type="image">配合使用)

        该属性规定图像输入相对于周围其他元素的对齐方式。(不推荐使用,推荐用CSS来设定)

        <input type="image" style="float: right;"/>

        image.gif

        补充:

        CSS float属性:

          1. right:元素向右浮动
          2. left:元素向左浮动
          3. none:元素不浮动(默认值)
          4. inherit:规定应从父元素继承float属性的值。

          3、alt属性(只能与<input type="image">配合使用)

          该属性为图像输入规定替代文本。(不属于必需属性)

          alt属性为用户由于某些原因无法查看图像时提供了备选信息。当输入类型为image时,应该设置该属性。

          <input type="image"  src=QQ图片.jpg alt ="Sumbit"/>

          image.gif

          4、autocomplete属性

          该属性规定输入字段是否应该启用自动完成功能。

          自动完成允许浏览器预测对字段的输入,当用户在字段开始输入时,浏览器基于之前输入过得值,应该显示出在字段中填写的选项。

          属性值 描述
          on 默认值,开启自动完成功能。
          off 禁止启用自动完成功能
          <input type="email" name="emailz" autocomplete="on"/>

          image.gif

          autocomplete适用于<form>及<input>类型:

          text,search,URL,telephone,email,Password,datepickers,range,color

          5、autofocus属性(不适用于<input type="hidden">)

          该属性规定当页面加载时input元素应该自动获取焦点。

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

          image.gif

          6、checked属性(与<input type="checkbox">或<input type="radio">配合使用)

          该属性规定在页面加载时应该被预先选定的input元素。

          <input type="checkbox" name="abc" value="car" checked="checked"/>

          image.gif

          7、disabled属性(不适用于<input type="hidden">)

          该属性规定应该禁用的input元素。被禁用的input元素既不可用,也不可点击。可通过JS来删除disabled的值,将input元素的值切换为可用。

          <input type="text" name="abc" disabled="disabled"/>

          image.gif

          8、form属性

          该属性规定input元素所属的一个或多个表单。

          form属性值必须是其所属的表单的id,若引用一个以上的表单,请使用空格分隔的列表。

          <form action="/04.jpg" method="get" id="form1">
                 first name:<input type="text" name="fname" form="form1"/>
           </form>

          image.gif

          9、formaction属性(适用于<input type="submit">和<input type="image">)

          覆盖form元素的action属性。

          属性值 描述
          相对URL 指向站内的文件(如,src=“example.htm”)
          绝对URL 指向其他站点(如,src="www.baidu.com")
          <input type="text" name="fname" form="nameform"/>

          image.gif

          10、formenctype属性(与<input type="submit">和<input type="image">配合使用)

          覆盖form元素的enctype属性。

          属性值 描述
          application/x-www-form-urlencoded 在发送前对所有字符进行编码(默认值)。
          mulitpart/form-data 不对字符编码,当使用有文件上传控件的表单时,该值是必需的。
          text/plain 将空格转换为“+”,但不编码特殊字符。

          11、formmethod属性(与<input type="submit">和<input type="image">配合使用)

          覆盖form元素的method属性。

          属性值 描述
          post 以HTTP post事务的形式发生表单数据。
          get 以URL追加表单数据: URL?name=value&name=value
          <input type="submit" formmethod="post" formaction="deno_post.asp" value="Sumbit"/>

          image.gif

          12、formnovalidate属性:

          覆盖form元素的novalidate属性,如果使用该属性,则提交表单时按钮不会执行验证过程。

          <input type="submit" formnovalidate="formnovalidate" value="Sumbit"/>

          image.gif

          13、formtarget属性(与<input type="submit">和<input type="image">配合使用)

          覆盖form元素的target属性。

          HTML5不支持框架和框架集。

          属性值 描述
          _blank 在新窗口/选项卡中将表单提交到文档。
          _self

          在同一框架中将表单提交到文档(默认值)。

          _parent 在父框架中将表单提交到文档。
          _top 在整个窗口中将表单提交到文档。
          framename 在指定的框架中将表单提交到文档。
          <input type="submit" formtarget="_blank" value="Sumbit"/>

          image.gif

          14、height/width属性(只能与<input type="image">配合使用)

          该属性规定image input的高度/宽度。

          属性值 描述
          pixels 以像素计为单位
          % 以包含元素的百分比计为单位
          <input type="image" src="img_sumbit.gif" alt="sumbit1" width="128" height="128" />

          image.gif

          15、list属性:

          该属性引用数据列表,其中包含输入字段的预定义选项。

          <input type="url" list="url_list" name="link" /> <!--list的值为文档中的datalist的id-->

          image.gif

          16、max/min属性

          该属性规定输入字段所允许的最大值/最小值,配合使用可创建取值范围。

          属性值 描述
          number 数字值。
          date 日期。
          <input type="number" name="point" min="0" max="10"/>

          image.gif

          17、maxlength属性(与<input type="text">或<input type="password">配合使用)

          该属性规定输入字段的最大值及字符个数计。

          <input type="text" name="point" maxlength="85"/>

          image.gif

          18、multiple属性 (适用于<input type="email">和<input type="file">)

          该属性规定输入字段可选择多个值。

          <input type="file" name="point" multiple="multiple"/>

          image.gif

          19、name属性:

          该属性规定input元素的名称,用于对提交服务器后的表单数据进行标识,只有设置了name属性的表单元素才能在提交表单时传递它们的值。

          20、pattern属性:

          该属性规定用于验证输入字段的模式(正则表达式)。

          <input type="text" name="point" pattern="[A-z]{3}"/>

          image.gif

          21、placeholder属性:

          该属性提供可描述字段预期值的提示信息,该提示会在输入字段为空时显示,输入信息后则会消失。

          <input type="text" name="point" placeholder="hello"/>

          image.gif

          22、readonly属性(适用于<input type="text">和<input type="password">)

          该属性规定输入字段为只读,只读字段不能修改。

          用户可以使用tab键切换到该字段,还可以选中或拷贝文本。

          <input type="text" name="point" value="china" readonly="readonly"/>

          image.gif

          23、required属性:

          该属性必需在提交之前填写输入字段,若使用该属性,则字段是必填(或必须)的。

          <input type="text" name="point" required="required"/>

          image.gif

          24、size属性:

          该属性定义输入字段的宽度。

          对于<input type="text">和<input type="password">size属性定义可见的字符数,而对于其他类型,size属性定义的是以像素为单位的输入字段宽度。

          在这里推荐使用CSS来代替:

          <input type="text" style="width:100px"/>

          image.gif

          25、src属性(只能与<input type="image">配合并同时使用)

          该属性规定作为提交按钮显示的图像的URL。

          属性值 描述
          post 以HTTP post事务的形式发生表单数据。
          get 以URL追加表单数据: URL?name=value&name=value
          <input type="image" src="submit.jpg" alt="sumbit" />

          image.gif

          26、step属性:

          规定输入字段的合法数字间隔,可以与max以及min属性配合使用。

          <input type="number" name="point" step="3" />

          image.gif

          27、type属性

          属性值 描述
          button 定义可点击按钮

          checkbox

          定义复选框
          file 定义输入字段和浏览按钮,供文件上传
          hidden 定义隐藏的输入字段
          image 定义图像形式的提交按钮
          password 定义图像形式的提交按钮
          radio 定义密码字段,该字段中的字符被掩码
          reset 定义单选按钮
          submit 定义重置按钮
          text 定义单行的输入字段,用户可以其中输入文本,默认20个字符

          28、value属性:

          为input元素设定值。

            • type=“bottom”,“reset”,“submit”——定义按钮上的显示文本。
            • type=“text”,“password”,“hidden”——定义输入字段的初始值。
            • type=“checkbox”,“radio”,“image”——定义与输入相关联的值。
            • 无法与type=“file”一同使用。


            目录
            打赏
            0
            0
            0
            0
            11
            分享
            相关文章
            HTML5 元素2
            HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
            HTML5 <nav> 元素2
            HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。
            HTML5 表单元素1
            HTML5引入了新的表单元素,如`&lt;datalist&gt;`、`&lt;keygen&gt;`和`&lt;output&gt;`,以增强表单的功能性和用户体验。
            HTML5 新的 Input 类型6
            `&lt;input type=&quot;url&quot;&gt;` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
            HTML5 新的 Input 类型5
            HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`&lt;input type=&quot;tel&quot;&gt;` 用于输入电话号码;`&lt;input type=&quot;time&quot;&gt;` 允许用户选择时间(不带时区);`&lt;input type=&quot;url&quot;&gt;` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
            HTML5 新的 Input 类型2
            `&lt;input&gt;` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
            HTML5 新的 Input 类型3
            `&lt;input type=&quot;month&quot;&gt;` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `&lt;input type=&quot;number&quot;&gt;` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
            HTML5 新的 Input 类型1
            HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`&lt;input type=&quot;color&quot;&gt;`允许用户通过颜色选择器选取颜色,而`&lt;input type=&quot;date&quot;&gt;`则提供了一个日期选择器来方便用户选择日期。
            HTML5 语义元素1
            HTML5引入了语义元素,如`&lt;nav&gt;`、`&lt;header&gt;`、`&lt;footer&gt;`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`&lt;div&gt;`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`&lt;section&gt;`标签用于定义文档中的节,而`&lt;article&gt;`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。
            HTML5 新的 Input 类型4
            `range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。
            AI助理

            你好,我是AI助理

            可以解答问题、推荐解决方案等