• 表单


    • 表单的功能结构
    • 文本栏、密码栏、隐藏栏
    • 复选栏、单选栏
    • 窗体栏位、区块栏位
    • 按钮、图像按钮
    • 允许上传文件
    • 表单的外框和标题
    • 元件的次序和快捷键

    表单是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具。

    7.1 表单的功能结构:

                主标记结构:<form>…</form>

    属性           值                  说明

    name        字符串         给这个表单起个名字

    method     get(默认)/post(建议使用)     表单的传输方式

    action        url                传输目标(默认传给自己)

     

    7.2 文本栏、密码栏、隐藏栏

    文本栏:<input type="text" name="栏位名称" value="栏位内定值(默认输入的值,非必须有)" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly(只读)">

    密码栏:<input type="password" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">

    隐藏性栏位:<input type="hidden" name="栏位名称" value="栏位值">

     

    7.3 复选栏、单选栏

    多重勾选栏位:<input type="checkbox" name="栏位名称(复选栏的栏位名称一般都填相同的)" value="内定值(必须有)"     checked="checked(默认勾选)" disabled="disabled(不能修改)">

    单选栏位:<input type="radio" name="栏位名称(单选栏的栏位名称一般都填相同的)" value="内定值(必须有)" checked="checked(默认勾选)" disabled="disabled(不能修改)">

     

    7.4 窗体栏位、区块栏位

    窗体选项栏位设置:<select name="栏位名称" size="数字" >
         <option value="选项值" selected="selected(默认选值)">…
         <option value="选项值">…
         <option value="选项值">…
         </select>

    //分组<optgroup label="分组名称"></optgroup>

    (<optgroup label="分组名称">

    <option value="选项值" selected="selected">…
         <option value="选项值">…
         <option value="选项值">

    </optgroup>

    //多选multiple(<select name="栏位名称" size="数字" multiple>)

     

    文字区块的设置:<textarea cols="设置长度" rows="设置宽度">
    ………(可以让别人输入意见或建议等用途)
    </textarea>

     

    7.5 按钮、图像按钮

    按钮设置: <input type="submit(提交)" value="按钮中显示的文字">
    <input type="reset(重写)" value="按钮中显示的文字">

     

    按钮图像:<button name="栏位名称" type="图象形态">
    <img src="URL">
    </button>

     

    图像按钮:<input type="image" src="url" alt="文本">

    7.6 允许上传文件

    上传栏位:<input type="file" name="file">

    7.7 表单加上外框和标题

    外 边 框:<fieldset>...</fieldset>

    标  题:<legend>...</legend>

    7.8 元件的次序和快捷键

    accesskey="w" (Alt+w) (Ctrl+w)

    tabindex="n"

  • 相关阅读:
    大数据学习——三大组件总结
    js获取当前时间的前一天/后一天
    Windows下主机名和IP映射设置
    大数据学习——HDFS的shell
    微服务化架构特征
    Spring cloud consul 相关前提知识
    Kubeadm 安装
    remove docker ce fully on centos7
    Jquery Gritter set position
    Toggle Checkboxes on/off
  • 原文地址:https://www.cnblogs.com/lifi/p/5648180.html
Copyright © 2020-2023  润新知