• 关于Form表单一些基础知识



    1、两个重要属性:
    action:表单需要提交的服务器地址
    method:表单提交数据使用的方法,get/post
    >>>get和post的区别
    ①get传参使用URL传递,所有参数在地址栏可见,不安全;get传参数据量有限;
    ②post传参使用http请求传递,比较安全;Post可以传递大量数据;
    但是,get的传递速率要比post快。(比如百度搜索用get)

    >>>URL传参的形式:链接URL地址?name=value1&name2=value2(?必须为英文问号)

    2、inpute的常用属性:
    ① type:设置inpute的输入类型
    ② name:给inpute起名。一般情况下,name属性必不可少。因为,传递数据时,使用name=value(输入内容) 的形式传递;
    ③ value:inpute输入框的默认值
    ④ placeholder:输入框的提示内容。当inpute有默认的value或者输入值时,placeholder消失。

    3、input-type属性的常用属性值
    ① text:文本输入框
    ② password:密码输入框,输入内容默认显示小黑点。
    ③ radio 单选框
    >>>使用radio时,value属性必填。提交时,提交的为value中的默认值;
    >>>radio凭借name属性,确定是否属于同一组,name相同为同组,只能选一个
    >>>使用checked="checked"属性,设置默认选中项.
    ④ 使用accept="类型",设置只能上传的文件类型,image/* 任意格式图片
    ⑤ submit:提交按钮。将所有表单数据,提交至后台服务器。
    ⑥ reset重置表单数据,将表单数据恢复到默认状态。
    ⑦ image:图形提交按钮。跟submit一样,具有表单提交功能。
    >>>使用src属性,选择图片路径
    ⑧ 普通按钮,没有任何作用。

    4、属性名等于属性值的情况:
    ① checked="checked" 设置radio或CheckBox的默认选中项
    ② multiple="multiple" 设置select为多选
    ③ selected="selected" 设置select控件,默认选中的option选项
    ④ readonly="readonly" 设置textarea为只读模式,不允许编辑
    ⑤ disabled="disabled" 禁用控件。
    >>>当input被disabled禁用时,该input的name和value将无法向后台传递
    ⑥ hidden="hidden"隐藏控件。等效于<input type="hidden"/>
    ⑦ required="required" 设置input为必填
    ⑧ Autofocus="Autofocus" 自动获得焦点

    5[下拉选择控件select]
    ① 写法:<select>
    <option></option> //可以有N多个
    </select>
    ② name属性,应该写在<select>上,所有选项只有一个name
    ③ multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般不用。
    ④ option常用属性:
    value="":当option没有value属性时,往后台传递的是<option></option>标签中的文字;
    当option有value属性时,往后台传递的是value属性的值。
    title="":鼠标指上后显示的文字。
    selected="selected":默认选中。
    ⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组,label属性表示分组名。

    6、 【文本域 textarea】
    ① 写法:<textarea></textarea>
    ② 设置宽高style=" 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用
    ③ readonly="readonly" 设置为只读模式,不允许编辑。
    ④ style="resize: none;" 设置为宽高不允许修改。
    ⑤ style="overflow: ;" 设置当文字超出区域时,如何处理。
    >>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
    >>> 常用属性值:hidden 超出区域的文字,隐藏无法显示
    scroll 无论文字多少,均会显示滚动
    auto 自动,根据文字多少自动决定是否显示滚动条(默认样式)

    7、表格的边框与标题
    <fieldset>
    <legend>联系方式</legend>表格的标题
    。。。N多个元素(inpute/select/textarea)
    </fieldset>
    注:一个表单,可以有多组边框+标题

    -->

    <!-- [HTML5智能表单]
    ① H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签中。即可通过表单进行提交。
    ② 新增N多个新属性,详见表格

    ③ 新增inpute的属性
    Autocomplete:自动完成功能
    >>>记忆之前输入过的内容,在下次输入时根据以前的内容提示,自动完成。
    >>>绝大部分浏览器自动开启)
    >>>有两个属性:Off/On
    >>>可以在<form>标签上设置Autocomplete,控制整张表单的自动完成开关。但可以在个别input上单独设置,覆盖form的整体设置。

    Autofocus:自动获得焦点 Autofocus="Autofocus"

    Form:所属表单 所属表单,通过form表单的id,指向特定表单。


    Required:必填 required="required" 设置input为必填。

    Pattern:验证input的模式

    Placeholder:提示

  • 相关阅读:
    Express框架学习总结
    Node.js学习心得
    清理svn.bat
    mysql sql语句大全
    SQL语句优化原则
    mysql数据库忘记密码时如何修改
    MySQL索引基础
    SQL语句优化技术分析
    mysql索引的类型和优缺点
    谷歌浏览器查询缓存视频图片
  • 原文地址:https://www.cnblogs.com/Xuedz/p/6584744.html
Copyright © 2020-2023  润新知