表单

表单标签

注册和登录目的：收集用户信息,能够输入内容

input标签

text
- 文本输入类型
- ```
<input type="text" name="username">
```

password

密码类型

<input type="password" name="password">

radio

单选按钮

<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女

checkbox

复选框

<input type="checkbox" name="course" value="HTML">HTML
<input type="checkbox" name="course" value="CSS">CSS

button
- 普通按钮
- ```
<input type="button" value="点我">
```
submit
- 提交按钮
- ```
<input type="submit" value="提交">
```
reset
- 重置按钮
- ```
<input type="reset" value="清空">
```
file
- 文件上传
- ```
<input type="file" name="file">
```

image

图像形式的提交按钮

<input type="image" src="submit.jpg" alt="submit">

hidden
- 隐藏域

select

下拉框

<select name="area"><option value="HTML">html</option><option value="JS">js</option><option value="CSS">css</option>
</select>

textarea
- 文本域

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>

常用表单的属性

action

action属性定义提交表单时执行的动作。通常表单会提交到web服务器网页，如果省略会被提交到当前页面

method

get
- 从服务器获取数据, 数据量小，不安全的
- get是默认方法
post
- 向服务器传递数据，相对安全
- 数据量大
checked
- 应用到单选框，复选框
- ```
<input type="checkbox" checked>
```

selected

下拉框

<select name="area"><option value="HTML">html</option><option value="JS" selected>js</option><option value="CSS">css</option>
</select>

value

<input type="text" name="name" value="web前端">

readonly

<input type="text" name="name" value="web前端" readonly>

disabled

<input type="text" name="name" value="web前端" disabled>

maxlength

<input type="text" name="name" maxlength="6">

size
- ```
<select name="name" size="3">
```

style=“resize: none;”

<!-- resize: none 设置为不能改变尺寸 -->
<textarea name="" cols="30" rows="10" style="resize: none;"></textarea>

文本溢出处理

单行文本溢出显示省略号
- 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;/*设置或检索伸缩盒对象的子元素的排列方式*/
}

web前端全栈0基础到精通（祺）08相关推荐

web前端全栈0基础到精通（祺）01
前端的概述 web的发展史 web1.0 简单的静态页面早期三大门户搜狐新浪网易 web2.0 更注重用户之间的交互用户即是信息的消费者也是制造者微博 web3.0 人工智能复杂的页面功 ...
web前端全栈0基础到精通（祺）vue 02
一.localStorage 和 sessionStorage的区别相同点: 都可以实现存储. 它们的大小都是5MB左右. 它们的存储方式都必须以字符串进行存储!!!! 它们的语法都是相同.存值: ...
web前端全栈0基础到精通（祺）js 02
数据类型分类. 基本数据类型: number string boolean null undefined 复杂/复合/引用数据类型: object array function 检验数据类型语法: ...
web前端全栈0基础到精通（祺）11
HTML5基础 HTML5中新增的布局标签 html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化) header标签 <hea ...
web前端全栈0基础到精通（祺）vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
web前端全栈0基础到精通（祺）vue 04
一.组件(component) 在前端,两大概念一.模块模块指的就是逻辑封装,一些共通的功能,你把它提取出来,封装到js中.你需要这个功能,你就引入js es6的导入导出(导出的方式决定你引入的方 ...
web前端全栈0基础到精通（祺）07
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...
web前端全栈0基础到精通（祺）03
盒模型基础选择器通配符选择器 * {width: 200px;height: 200px;background-color: yellow; } 标签选择器 div {width: 200px;h ...
web前端全栈0基础到精通（祺）js 10
表单快速获取表单元素 \1. 需要先获取表单 form \2. 快速获取表单元素 form.name值 var form = document.getElementsByTagName('form' ...

web前端全栈0基础到精通（祺）08

表单

表单标签

常用表单的属性

文本溢出处理

web前端全栈0基础到精通（祺）08相关推荐

最新文章

热门文章