表单及阿里巴巴矢量图

最新推荐文章于 2024-03-20 19:30:00 发布

初见766

最新推荐文章于 2024-03-20 19:30:00 发布

阅读量250

点赞数

分类专栏： html css 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_60488295/article/details/121653941

版权

html css 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

表单

表单元素

表单元素是允许用户在表单中输入内容的标签，比如：文本域、下拉列表、单选框、复选框等。
表单元素标签
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-阿里巴巴矢量图标库

初见766

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单及阿里巴巴矢量图

表单表单元素表单元素是允许用户在表单中输入内容的标签，比如：文本域、下拉列表、单选框、复选框等。表单元素标签 input标签概述：<input> 标签是最重要的表单元素。 type属性取值不同，可以展示出不同的表单形式作用：用来定义不同种类的输入控件语法：<input type="类型"> 常用类型9种 type="text" 作用：用于文本输..
复制链接

扫一扫