表单的input

input元素的属性

  1. type在这里插入图片描述在这里插入图片描述显示效果
    在这里插入图片描述
    在这里插入图片描述

学习:不同的type适用于不同的场景。其中image是图形提交按钮,可用height和width可以调节按钮的大小。
2. control

在这里插入图片描述显示效果
在这里插入图片描述在这里插入图片描述
学习:无论文本框中是否输入内容,点击设置的按键都会变为所设定的默认值。

  1. placeholder

在这里插入图片描述显示效果
在这里插入图片描述
学习:在文本框中输入内容之后浅提示消失,可用于提示输入内容的类型。

  1. formenctype

在这里插入图片描述
显示效果

在这里插入图片描述
学习:

  • application/x-www-form-urlencoded

是默认的效果。在发送前对所有字符进行编码。将空格转换为 “+” 符号,特殊字符转换为 ASCII HEX 值。

  • multipart/form-data

不对字符编码。当使用有文件上传控件的表单时,该值是必需的。

  • text/plain

将空格转换为 “+” 符号,但不编码特殊字符。

  1. formaction
    在这里插入图片描述显示效果
    在这里插入图片描述
    学习:利用formation属性可以将填写内容提交至指定网页。
  2. formtarget

在这里插入图片描述显示效果
在这里插入图片描述

学习:

  • _blank

在新窗口中打开。

  • _self

默认。在相同的框架中打开。

  • _parent

在父框架集中打开。

  • _top

在整个窗口中打开。

  • framename

在指定的框架中打开。

  1. autofocus
    在这里插入图片描述显示效果
    在这里插入图片描述

学习:autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。如果使用该属性,则 input 元素会获得焦点。
8. indeterminate在这里插入图片描述显示效果
在这里插入图片描述在这里插入图片描述在这里插入图片描述
学习:显示为不确定是否选择样式,点击一次后显示为不选择,之后点击在选择/不选择之间交替。
9. list

在这里插入图片描述
显示效果
在这里插入图片描述
学习:利用datalist可以实现可补充的选择框。

  1. pattern

在这里插入图片描述
显示效果
在这里插入图片描述在这里插入图片描述
学习:可按需求规定输入内容的格式。

  1. formmethod

在这里插入图片描述
显示效果
在这里插入图片描述在这里插入图片描述在这里插入图片描述
学习:

  • Get是不安全的,因为在传输过程,数据被放在请求的URL中;Post的所有操作对用户来说都是不可见的。
  • Get传送的数据量较小,这主要是因为受URL长度限制;Post传送的数据量较大,一般被默认为不受限制。
  • Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。
  • List item

Get执行效率却比Post方法好。Get是form提交的默认方法。
12. required
在这里插入图片描述
显示效果
在这里插入图片描述在这里插入图片描述
学习:可利用required来要求必须填写。

  1. autocomplete

在这里插入图片描述

学习:

  • on
    默认。规定启用自动完成功能。

  • off
    规定禁用自动完成功能。
    (自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。)

发布了13 篇原创文章 · 获赞 0 · 访问量 247
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览