美文网首页
表单form与input常用标签

表单form与input常用标签

作者: 好奇而已 | 来源:发表于2017-03-11 12:06 被阅读136次

    关键字:
    form表单作用;
    常用input标签;
    post 和 get 区别;
    radio分组;
    placeholder作用;
    type-hidden;


    form表单有什么作用?

    我们平时填写的纸质表单一样,HTML 表单用于搜集不同类型的用户输入
    表单是一个包含表单元素的区域 表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素

    有哪些常用的input 标签,分别有什么作用?

    <input> 标签规定了用户可以在其中输入数据的输入字段。
    <input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。
    输入字段可通过多种方式改变,取决于 type 属性。

    常用的input 标签:

    • accept 属性 :规定了可通过文件上传提交的服务器接受的文件类型。
      注意:accept 属性仅适用于 <input type="file">。

    • alt 属性: 为用户由于某些原因(比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器)无法查看图像时提供了替代文本。
      注意:alt 属性只能与 <input type="image"> 配合使用。

    • checked 属性是一个布尔属性。
      checked 属性规定在页面加载时应该被预先选定的 <input> 元素。
      checked 属性适用于 <input type="checkbox"> 和 <input type="radio">。
      checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。

    • disabled 属性是一个布尔属性。
      disabled 属性规定应该禁用的 <input> 元素。
      被禁用的 input 元素是无法使用和无法点击的。
      表单中被禁用的 <input> 元素不会被提交

    • name 属性规定 <input> 元素的名称。
      name 属性用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据。
      注意:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

    • size 属性规定以字符数计的 <input> 元素的可见宽度。
      注意:size 属性适用于下面的 input 类型:text、search、tel、url、email 和 password。

    • src 属性规定显示为提交按钮的图像的 URL。
      注意:src 属性对于 <input type="image"> 是必需的属性,且只能与 <input type="image"> 配合使用。

    • type 属性规定要显示的 <input> 元素的类型。
      默认类型是:text。
      提示:该属性不是必需的,但是我们认为您应该始终使用它。

    • value 属性规定 <input> 元素的值。
      value 属性对于不同 input 类型,用法也不同:
      对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
      对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始(默认)值
      对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL。
      注意:value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
      注意:value 属性不适用于 <input type="file">。

    • 以上的参考地址

    post 和 get 方式的区别?

    两种 HTTP 请求方法:GET 和 POST
    在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST。
    GET - 从指定的资源请求数据。
    POST - 向指定的资源提交要被处理的数据。

    GET 方法

    请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:
    /test/demo_form.php?name1=value1&name2=value2
    有关 GET 请求的其他一些注释:
    GET 请求可被缓存
    GET 请求保留在浏览器历史记录中
    GET 请求可被收藏为书签
    GET 请求不应在处理敏感数据时使用
    GET 请求有长度限制
    GET 请求只应当用于取回数据

    POST 方法

    请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:
    POST /test/demo_form.php HTTP/1.1
    Host: w3cschool.cc
    name1=value1&name2=value2
    有关 POST 请求的其他一些注释:
    POST 请求不会被缓存
    POST 请求不会保留在浏览器历史记录中
    POST 不能被收藏为书签
    POST 请求对数据长度没有要求

    POST和GET区别

    Paste_Image.png

    在input里,name 有什么作用?

    只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
    网页检查元素的请求数据格式为name:xxx

    radio 如何 分组?

    radio通过对name的定义来进行分组,同一个name的radio只能单选。

    placeholder 属性有什么作用?

    为输入框提供提示功能的占位文字,比如:请输入密码
    placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。
    该提示会在用户输入值之前显示在输入字段中。
    注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

    type=hidden隐藏域有什么作用? 举例说明

    Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。

    这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的** value 属性**保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,就是用这种类型的元素。
    在 HTML 表单中 <input type="hidden"> 标签每出现一次,一个 Hidden 对象就会被创建。

    Paste_Image.png

    表单验证

    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
    数据是否为空.
    email地址
    验证日期是否输入正确?
    表单输入内容是否为数字型?

    相关文章

      网友评论

          本文标题:表单form与input常用标签

          本文链接:https://www.haomeiwen.com/subject/hixogttx.html