美文网首页
原生表单部件

原生表单部件

作者: skoll | 来源:发表于2022-04-17 22:48 被阅读0次

    通用属性:所有的表单元素都有一组通用的属性,他们对下面的组件都通用

    1 .autofocus:这个属性允许当页面加载元素是否自动聚焦输入焦点,除非用户覆盖它。
    2 .disabled:表示用户不能与元素交互。如果不能指定这个属性,元素将从包含他的元素继承设置,例如fieldset。如果没有包含在设定了disabled属性的元素里,那么这个元素就是可用的
    3 .form:小部件与之关联的表单元素。属性值必须是同个文档中的form元素的id属性。理论上,允许在form元素之外设置一个表单小部件。实践中没有任何支持该属性的浏览器
    4 .name:元素的名称,和表单数据一起提交
    5 .value,元素的初始值。

    文本输入框

    1 .HTML表单文本字段是简单的纯文本输入控件。就是说富文本编辑器都是使用js,html和js
    2 .文本框的通用属性

    1 .readonly:用户不能修改输入值
    2 .disabled:输入值永远不会与表单数据的其余部分一起发送
    3 .placeholder:这是文本输入框中出现的文本,用来描述输入框的目的
    4 .size:框的物理尺寸
    5 .maxlength:可以输入的最大字符数
    6 .autocorrect:这个好像是可以检查拼写错误,确实在文本编辑器里面有发现过拼写报错变红
    

    3 .该autocomplete属性在hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, 和上有效password。autocomplete不是布尔值
    4 .全局值对所有元素都有效,它向浏览器提供关于在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。值包括none、text、tel、url、email、numeric、decimal和search。竟然还有这个
    5 .单行文本框的约束:单行文本只有一个真正的约束,如果输入带有换行符的文本,浏览器会在发送数据之前删除这些换行符

    多行文本框

    1 .textarea和常规的文本字段之间的主要区别主要是,允许用户输入包含硬换行符(回车符)的文本
    2 .当前的输入就是在textarea里面
    3 .resieze="none"这个属性可以关闭调整大小

    checkbox,radio

    1 .这俩被选中都是使用checked属性,来表示选中或者未选中
    2 .值得注意的是,这些小部件与其他列表小部件不一样,对于大多数表单部件,一旦表单提交,所有具有的name属性的小部件都会被发送,即使没有任何值被填。
    3 .但是这俩,只有在勾选时才会发送到name到服务器,如果没有被勾选,不会发送任何东西,甚至连name也不会发过去
    4 .关于这个最好的写法是这样的


    这个有个麻烦的地方就是filelist那个东西是不能改变样式的

    button

    1 .button元素中可以插入html元素,所以可以进行相应的样式化操作

    <button type="button">
        This an <br><strong>anonymous button</strong>
    </button>
    
    <input type="button" value="This is an anonymous button">
    

    datalist

    1 .可以使用datalist来为表单小部件提供建议,自动补全一些值,并且使用一些option子元素来指定要显示的值
    2 .然后使用list属性将数据绑定到一个文本框通常是一个input元素
    3 .按照规定,list和datalist元素可以用于任何需要用户输入的小部件。但是除了文本控件外(颜色或者日期),不同浏览器在不同的情况下会有不同的表现。正是因为如此,除了文本字段以外,要小心使用这个特性

    <label for="myFruit">What's your favorite fruit?</label>
    <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
    <datalist id="mySuggestion">
      <option>Apple</option>
      <option>Banana</option>
      <option>Blackberry</option>
      <option>Blueberry</option>
      <option>Lemon</option>
      <option>Lychee</option>
      <option>Peach</option>
      <option>Pear</option>
    </datalist>
    

    4 .虽然不会使用这个,但是要注意的是他会自动支持键盘上下键选择

    相关文章

      网友评论

          本文标题:原生表单部件

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