美文网首页前端开发
【HTML】 八、表单设计

【HTML】 八、表单设计

作者: 子午禾苇 | 来源:发表于2019-02-24 20:22 被阅读90次

    HTML标记语言

    一、HTML的语法
    二、html的基本结构
    三、文档设置标记
    四、图像标记
    五、超链接的使用
    六、表格
    七、HTML框架
    八、表单设计

    八、表单设计

    1. 表单标记

    <form>...</form>
    <form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容

    (1) 基本格式

    <form action="服务器端地址(接受表单内容的地址)" name="表单名称"method="post|get">...</form>

    (2) 常用属性

    I. name
    表单名称
    II. method
    传送数据的方式,分为post和get两种方式
    i) get方式
    get方式提交时,会将表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性
    ii) post方式
    post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制
    III. action
    表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为”no“
    IV. enctype
    设置表单的资料的编码方式
    V. target
    和超链接的属于类似,用来指定目标窗口

    2. 文本域和密码

    <input>标记

    <input>标记没有结束标记

    (1) 基本语法

    <input type="" name="" value="" size="" maxlength="">

    (2) 属性介绍

    I. type属性
    type属性有两个值

    • text 当type="text"时,<input>表示一个文本输入域
    • password 当type="password"时,<input>表示一个密码输入域
      II. name属性
      定义控件的名称
      III. value属性
      初始化值,打开浏览器时,文本框中的内容
      IV. size属性
      设置控件的长度
      V. maxlength属性
      输入框中最大允许输入的字符数

    3. 提交、重置、普通按钮

    1) 提交按钮
    <input type="submit">时,为提交按钮
    2) 重置按钮
    <input type="reset">时,为重置按钮
    3) 普通按钮
    <input type="button">时,为普通按钮

    4. 单选框和复选框

    1) 单选按钮
    <input type="radio">时,为单选按钮
    2) 复选框
    <input type="checkbox">时,为复选框
    3) 注意⚠️
    单选框和复选框都可以使用”cheked“属性来设置默认选中项

    5. 隐藏域

    <input type="hidden">时,为隐藏表单域

    6. 多行文本域

    用法 使用<textarea>标记可以实现一个,能够输入多行文本的区域
    语法格式
    <textarea name="name" rows="value" cols="value" value="value"> ... ... <textarea>
    rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数

    7. 菜单下拉列表域

    <select>标记

    (1) 语法格式

                    <select name="" size="value" multiple>
                    <option value="value" selected>选项1</option>
                         
                    <option value="value">选项3</option>
                    ... ... ...
                    </select>
    

    (2) 属性

    I. multiple属性

    multiple属性不用赋值,其作用是,表示用可以多选的下来列表,如果没有这个属性就只能单选

    II. size属性 设置列表的高度
    III. name属性 定义这个列表的名称

    (3) option标记

    <option>标记用来指定列表中的一个选项,需要放在<select></select>之间

    • value 给选项赋值,指定传送到服务器上面的值
    • selected 指定默认的选项

    相关文章

      网友评论

        本文标题:【HTML】 八、表单设计

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