前端基础学习笔记表单

古城微笑少年丶 2022-04-12 09:42 234阅读 0赞

# 定义 #

定义了一个区域，可以和用户交互的区域，也可以用来向web服务器提交信息，一般用来做登陆注册搜索的功能。

# form表单的属性： #

*  action ：一个处理这个form信息的程序所在的URL 规定向何处发送表单 （接受数据的地址）
 *  method ：提交表单的方式

1.  post: 表单数据会包含在表单体内然后发送给服务器. 这种只是相对get方式安全一些，但是其实一点也不安全！更安全的别想着靠个属性值就能实现了。
2.  get: 表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）。

*  target：指示在提交表单之后，在哪里显示收到的回复 **\_self默认 \_blank在新窗口打开**
 *  name: 这个form的名字。HTML5中，一个文档中的多个form当中，name必须唯一而不仅  
    仅是一个空字符串。

# 表单元素/交互（input）控件： #

为基于Web的表单创建交互式控件，以便接受来自用户的数据。大部分用input标签来定义表单元素！决定表单元素的类型的取决于type属性！

### 文本框： ###

*  type 表单控件的类型
 *  name 与表单数据一起提交的控件的名称。
 *  value 控件的初始值。该属性是可选的，除非type属性的值为radio或checkbox。
 *  placeholder 向用户提示可以在控件中输入的内容。占位符文本不得包含回车符或换行符。

### 密码框： ###

password：其值被遮蔽的单行文本字段

### radio 单选按钮： ###

radio：一个单选按钮，允许从多个选项中选择一个值。 **要注意name值必须要相同的**

### **label 关联 （重要）** ###

通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。

for属性值，对应input的id值

### checkbox 多选按钮 ###

checkbox：允许选择/取消选择单个值的复选框。  
可能属性   
checked 默认选中一项目   
disabled 禁用某项

### 提交按钮 ###

submit：提交表单的按钮

### 重置按钮 ###

reset：一个按钮，将表格的内容重置为默认值。

### 上传按钮 ###

file：让用户选择文件的控件。真正文件上传效果没那么简单

### 隐藏 ###

hidden：未显示但其值已提交给服务器的控件。（不想用户看到的暗中数据交互）

### 图片控件 ###

image：一个图形提交按钮。您必须使用src属性来定义图像的来源，并使用alt属性来定义替代文字。您可以使用高度和宽度属性以像素为单位定义图像的大小。（然而现现在基本也不使用）

# 非input控件 #

### textareas 文本域 ###

<textarea name="textarea"rows="10" cols="50">Write something here</textarea>

表示一个多行纯文本编辑控制。

*  rows属性定义 高度
 *  cols属性定义 宽度
 *  resize 调整尺寸样式属性 none/vertical/horizontal

### select下拉选框 ###

可选样式：   
size 默认显示几行

### datalist ###

加id名

input内的list属性=“id名”，联系起来，提示选择作用

### option 下拉选项 ###

用于定义在 <select>  元素中包含的项。   
可选样式   
disabled 禁用某项   
selected 规定在select里面默认展示项   
Value 1  
Value 2   
Value 3

### fieldset 给表单分组 ###

通常用来对表单中的控制元素进行分组,要写在form元素里面。

### legend ###

代表一个用于表示它的父元素 <fieldset> 的内容的标题。

# 表单伪类： #

### :focus ###

表示获得焦点的元素（如表单输入）。

1.      input:enabled{width:;height:;}（粗略记忆）
        /*选择能被操作的input 可以输入可以被用户操作的input元素*/
2.      input:disabled{width:;height:;}（粗略记忆）
        /*选择不能被操作的input*/
    
        <input type='text' disabled='disabled' />
    
     
3.      input:checked + p{background:red;}（重点记忆）
        /*选择可以被选中的input 需要注意的是针对radio 和 checkbox */
    
        <input type='checkbox' />

### opacity（css3） 透明度 ###

**1、opacity 属性设置元素的不透明级别 **  
A 标准不透明度： opacity:0~1;   
从 0（完全透明）   
到 1（完全不透明）   
opacity写法 取值01 兼容问题 ie8以下不识别  
兼容ie8以下 ：使用IE 滤镜（兼容IE下不支持opacity的版本）：   
filter:alpha(opacity=0~100);  
从 0（完全透明）   
到 100（完全不透明）  
**2、opacity与rgba的区别** 完全不一样的概念 希望不要混淆   
rgba是透明颜色，顶多控制一个元素的背景颜色，父透子不透   
opacity是控制整个元素的透明程度，父透子也透