首页 > 编程学习 > 表单及阿里巴巴矢量图

表单及阿里巴巴矢量图

发布时间:2022/12/10 16:11:01

表单

表单元素

  • 表单元素是允许用户在表单中输入内容的标签, 比如:文本域、下拉列表、单选框、复选框等。

  • 表单元素标签

  • input标签

    • 概述:<input> 标签是最重要的表单元素。 type属性取值不同,可以展示出不同的表单形式

    • 作用:用来定义不同种类的输入控件

    • 语法:<input type="类型">

    • 常用类型9种

      • type="text"

        • 作用:用于文本输入的单行输入字段

      • type=”password”

        • 作用:定义密码字段。

        • 注意:该字段中的字符被掩码

      • type=”radio”

        • 作用:定义单选按钮,允许用户在有限数量的选项中选择其中之一(需要指定单选按钮组)

        • 注意:必须加name和value,不然分不清提交的哪一个

      • type=”checkbox”

        • 作用:定义复选框,允许用户在有限数量的选项中选择零个或多个选项

        • 注意:必须加name和value,不然分不清提交的哪一个

      • type=”button“

        • 作用:定义普通按钮

        • 注意:Value属性定义按钮显示的文本

      • type=”submit”

        • 作用:定义用于向表单处理程序提交表单的按钮

        • 注意:省略了提交按钮的 value 属性,该按钮将显示默认文本”提交”(不同浏览器表现不同)

      • type="reset"

        • 作用:定义重置按钮,将表单元素的value属性值重置为它最初的默认状态

        • 注意:省略了提交按钮的 value 属性,该按钮将显示默认文本”重置”(不同浏览器表现不同)

      • type="image"

        • 作用:定义图像形式的提交按钮。

        • 属性

          • src="":指定图片地址

          • alt="":指定替换文本

    • 注意:src 属性和alt 属性必须与 <input type="image"> 结合使用

       <input type="image" src="https://timgsa.baidu.com/timg?" width="100">
      • type="file"

        • 作用:用于文件上传

  • textarea标签

    • 作用:定义多行输入字段(文本域)

    • 语法:<textarea>初始值</texarea>

    • 注意:不能够使用value属性规定它的初始值,初始值在开始和结束标签之间设置

  • 文本域可以用户可以通过鼠标拖拽改变大小,运用css样式 style="resize: none;"指定一个文本域表单标签不允许用户调整大小

  • lable标签

    • 作用:为 input 元素定义标注(标记) 通过<label> 标签的 for 属性值与相关元素的 id 值相同,绑定表单元素

    • 语法:<label for=""></label>

    • 效果描述:当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上

  • <!-- label的for属性要对应相应表单的id -->
    <input type="radio" name="shenfenzheng" value="zg" id="zg"><label for="zg">中国居民身份证</label>
    <input type="radio" name="shenfenzheng" value="ga" id="ga"><label for="ga">港澳台居民身份证</label>

  • select标签

    • 概述:select标签用于定义下拉列表,下拉列表种通过option标签定义选项

    • 语法

      <select name="" id=""> <option value="">北京</option><option value="">上海</option><option value="">天津</option>
      </select>

表单元素属性

    • name属性

      • 作用:定义表单元素的名称,用于在 JavaScript 中引用元素,或者在表单提交后引用表单数据

      • 注意:name属性是必须的,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    • value属性

      • 作用:规定输入字段的初始值和修改按钮上的文字内容

    • readonly属性

      • 作用:规定输入字段为只读(不能修改)

    • disabled 属性

      • 作用:规定输入字段是禁用的,被禁用的表单元素不能编辑也不能被提交

    • maxlength属性

      • 作用:maxlength 属性,规定输入字段允许的最大长度

    • selected 属性

      • 作用:规定<select>的选项<option>在页面加载时预先选定该选项。

             <option value="lz" selected>兰州</option>

    • size属性

      • 作用:规定下拉列表中可见选项的数目

           <select name="sel" id="" size="2">

表单区域

form标签

  • 语法:<form></form>

    • 作用:定义 HTML 表单域,是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明:比如最为常见的交互操作,注册会员、跟帖留言或者文章发布等

  • 注意:form表单实现上述操作是最为常见方式之一,也可以使用其他方式,比如ajax等

  • form的属性

    • action属性

      • 作用:action,可以提交到web服务器.

      • 注意:如果省略 action 属性,则 action 会被设置为提交到当前页面。

        <form action="https://www.baidu.com/s">

    • method属性

      • 作用:规定发送表单数据的 HTTP 方法

      • 取值:get(默认)/post

      • get 方法:将表单中数据的按照 variable=value 的形式,添加到 action 所指向的【 URL 后面,并且两者使用“?”连接】,而各个变量之间使用“&”连接

      • post方法:将表单中的【数据放在 form 的数据体】中,按照变量和值相对应的方式,传递到 action 所指向 URL。

      • get 和 post 区别(了解) 简单阐述,当前阶段不作为重点

  • 用途:get 从指定的资源请求数据,是用来从服务器上【获得数据】,而 POST - 向指定的资源提交要被处理的数据,是用来向服务器【上传递数据】

    • 安全性:【get 是不安全的】,因为【规定发送表单数据的 HTTP 方法(get 或 post)】,一些系统内部消息将会一同显示在用户面前。【post 的所有操作对用户来说都是不可见的】

    • 数据量:【get 传输的数据量小】,这主要是因为受 URL 长度限制;而 post 可以传输大量的数据,所以上传文件只能使用 post。

    • target属性

    • 作用:设置目标地址的打开方式

      • 取值:_self当前窗口(默认值)

        • _blank新窗口

          <form action="" target="_blank">

    • 注意:当前阶段不需要提交表单,只是熟悉表单常用元素与其属性,能够控制表单的外观形态即可

HTML参考手册

  • 作用

    • 帮助我们快速查阅完整的html元素并给出目标元素的相应释义

    • 方便我们学习和使用

    • 经常查阅文档是一个好的学习习惯

  • 推荐的网址

    • W3C : w3school 在线教程

    • CSDN:CSDN - 专业开发者社区

轮廓线

概述:轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。跟边框相比,轮廓线不占用空间。

outline简写

  • 可以设置的属性分别是(按顺序): outline-color outline-style outline-width

    • 说明:轮廓样式 outline-style ,轮廓颜色 outline-color,轮廓宽度 outline-width

    • 语法:空格隔开

    • 取值:参考边框

  • 注意:

如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

   .left {width: 200px;height: 400px;background-color: #900;float: left;margin-left: 20px ;outline:solid pink;}

CSS 鼠标样式

通过在CSS中,cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状

  • 常用值

    • 默认值: auto default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针(一只手) move 此光标指示某对象可被移动。

      e-resize 此光标指示矩形框的边缘可被向右(东)移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize 此光标指示矩形框的边缘可被向上(北)移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize 此光标指示矩形框的边缘可被向下移动(南)。 w-resize 此光标指示矩形框的边缘可被向左移动(西)。 text 此光标指示文本。 wait 此光标指示程序正忙(通常是一只表或沙漏)。 help 此光标指示可用的帮助(通常是一个问号或一个气球)。

等高布局

方法一

  • 伪等高:

    第一步:一个大盒子套三个盒子,大盒子不设置高度,由内容撑开,设置宽度。

    第二步:三个盒子左浮动,盒子不设置高度,由内容撑开,设置颜色,设置宽度。

    第三步:给三个盒子加padding-bottom: 9999px;margin-bottom: -9999px; 内外边距相消

    第四步:给大盒子加overflow:hidden

    <style> * { margin: 0; padding: 0; } .wrap { width: 900px; margin: 0 auto; border: 5px dashed lightgreen; overflow: hidden; } .wrap div { float: left; width: 300px; } .left { background-color: lightpink; padding-bottom: 9999px; margin-bottom: -9999px; } .center { background-color: rgb(235, 11, 44); padding-bottom: 9999px; margin-bottom: -9999px; } .right { background-color: rgb(120, 118, 224); padding-bottom: 9999px; margin-bottom: -9999px; } .clearfix:after { content: ''; display: block; clear: both; } </style>

2、方法二:

  • 真等高:

    第一步:三个嵌套的盒子,第三个盒子里写三个同级小盒子

    第二步:给三个嵌套的盒子固定宽度,加颜色。

    第三步:给三个小盒子设置固定宽度,加上浮动,用相对定位把第一个小盒子定位到相应的位置

    第四步:给第二个( b) 和第三个(c) 盒子加margin-left:负值盒子的宽度 给第一个(a)盒子overflow:hidden

  •     <style>* {margin: 0;padding: 0;}.a {width: 900px;background-color: rgb(235, 104, 104);margin: 0 auto;overflow: hidden;}.b {width: 900px;background-color: rgb(159, 224, 98);margin-left: -300px;}.c {width: 900px;background-color: rgb(180, 163, 241);margin-left: -300px;}.c div {width: 300px;float: left;position: relative;left: 600px;}.clearfix:after {content: '';display: block;clear: both;}</style><div class="a"><div class="b"><div class="c clearfix"><div class="left">1先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,行,</div><div class="right">2先帝创业未半平明之理,不宜偏私,使内外异法也。,</div><div class="center">3先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志			之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之				气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。</div></div></div></div>
    

文本溢出处理

  • 单行文本溢出显示省略号

  • white-space

  • normal 默认。空白会被浏览器忽略。

    • pre 空白会被浏览器保留。

    • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。

    • pre-wrap 保留空白符序列,但是正常地进行换行。

    • pre-line 合并空白符序列,但是保留换行符。

  • text-overflow

    • clip 修剪文本。

    • ellipsis 显示省略符号来代表被修剪的文本。

    • [string] 使用给定的字符串来代表被修剪的文本。 目前只在Firefox下有效。

  • p {

    width:200px; */限定盒子的宽度/ *

    overflow:hidden; /给元素设置溢出隐藏属性/ *

    text-overflow: ellipsis; /文本溢出显示省略号/*

    white-space:nowrap; /* 文本不换行 */

    }

  • 多行文本溢出显示省略号

    • 用WebKit的CSS扩展属性(只有-webkit-内核才有作用)

  • p{

    width:200px; */限定盒子的宽度/

    overflow: hidden; /给元素设置溢出隐藏属性/

    text-overflow: ellipsis; /文本溢出显示省略号/

    display: -webkit-box; /将对象作为弹性伸缩盒子模型显示/

    -webkit-line-clamp: 2;/用来限制在一个块元素显示的文本的行数,这是一个不规范的属性,它没有出现在CSS规范草案中。/

    -webkit-box-orient: vertical;/设置或检索伸缩盒对象的子元素的排列方式/

    }

阿里矢量图标

iconfont-阿里巴巴矢量图标库


本文链接:https://www.ngui.cc/zz/1568464.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000