前端基础学习笔记 表单

定义

定义了一个区域,可以和用户交互的区域,也可以用来向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属性!

文本框:

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

密码框:

<input type='password' name='password' value='' placeholder=''>

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

radio 单选按钮:

<form>
    <input type='radio' name='sex' value='' id='man'><label for='man'></l
    abel>
    <input type='radio' name='sex' value=''>
    <input type='radio' name='sex' value=''>
</form>

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

label 关联 (重要)

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

for属性值,对应input的id值

checkbox 多选按钮

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

提交按钮

submit:提交表单的按钮

重置按钮

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

上传按钮

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

<input type="file" >

隐藏

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

扫描二维码关注公众号,回复: 4474824 查看本文章

图片控件

<input type='image' src='' name='' width='' height='' border='' >

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写法 取值0­1 兼容问题 ie8以下不识别
兼容ie8以下 :使用IE 滤镜(兼容IE下不支持opacity的版本): 
filter:alpha(opacity=0~100);
从 0(完全透明) 
到 100(完全不透明)
2、opacity与rgba的区别 完全不一样的概念 希望不要混淆 
rgba是透明颜色,顶多控制一个元素的背景颜色,父透子不透 
opacity是控制整个元素的透明程度,父透子也透

猜你喜欢

转载自blog.csdn.net/weixin_41732430/article/details/84729251
今日推荐