HTML表单元素及CSS

表单

一、介绍

<form> 标签表示为表单,表单元素是允许用户在表单中输入内容。
属性:action-提交表单的地址
Method-提交表单的方式。属性值:get/post
      Enctype-被提交表单的MIME类型

二、表单组件

组件一般被定义在表单中(<form>标签中)
<input>标签表示输入框,为空标签。
<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。
属性1:type,type 属性规定要显示的 <input> 元素的类型。
属性值:text-表示输入框类型
- value - 表示输入框的值
         * 输入框所输入的文本内容
         * type - 表示输入框的类型
           * text - 表示文本输入框
           * password - 表示密码框
           * button - 表示按钮
           * reset - 表示重置按钮
             - 将表单内组件内容清除效果
           * submit - 表示提交按钮
             - 将当前的表单提交给指定的地址(action)
           * radio - 表示单选框
             -表示一组单选框(name属性)中只能选择一个
           * checkbox - 表示多选框
             -表示一组多选框,允许选择多个
           * file - 表示文件域
             -作用 - 允许选择本地的文件(默认不限制类型)
             -用途 - 多用于文件上传
           -hidden - 表示隐藏域
             -不会被显示在页面中(用户看不到)
             -作用 - 用于存储一些不希望被用户看到的数据

三、下拉列表

<select>标签表示下拉列表
         - 默认 - 表示下拉单选框
         - 属性
           -id - 表示标识
           - name - 表示名称
<option>标签表示下拉列表的选项
             - value - 表示值
<select>标签 - 下拉多选框
         -属性
           - size - 表示下拉列表默认显示选项的个数
           -multiple - 表示多选

四、文本域

<textarea>标签表示文本域
         - 属性
           - cols - 表示列
           - rows - 表示行

五、提交表单

1.实现提交表单的功能
     -定义<form>标签,并且定义表单组件
     -必须定义提交按钮(submit)
     - 必须配合<form>标签的action属性使用
2.method - 表示提交表单的方式
     - get - 默认方式,表单的所有请求数据被添加在请求地址中
       - 请求地址(在标准规范中是有限制的)
         -大小限制 - 无法添加数据量较大的内容
         -未加密(明文)
    - post - 一般建议使用这种
3.提交表单的方式至少两种,分别是get和post
     - 提交表单的方式常用是七种
     -RESTFul API(标准式API)
       - get - 获取
       - post - 修改
       - put - 新增
       - delete - 删除

六、文件上传

1.提交表单方式
- get - 只是将文件名称发送给服务器端
      - 没有实现文件上传功能
- - post - 只是将文件名称发送给服务器端
- enctype属性
  - application/x-www-form-urlencoded - 是<form>标签的默认值
  - 专门用于提交表单组件的内容(数据)为:
     - multipart/form-data - 用于文件上传
2.<input type=file>
     -默认 - 只能选择一个文件
     -选择多个文件 - multiple 属性

CSS

一、内联样式

1.内联样式 - 通过HTML的标准属性 style 实现
  -style="CSS的内容"
  - 问题
    -设置的样式只针对当前HTML元素有效
    -相同样式设定无法被重复使用
    - 并没有将结构与样式有效分离
2.<style></style>标签 -
  1) 内嵌样式表
    -用法 - 该标签中定义CSS的内容
    -好处
     -HTML的结构与样式分离(相对于内联样式)
     -定义的样式可以被重复使用
     -不是针对某个指定HTML元素
    -坏处
     - CSS的内容依旧被定义在HTML页面中
  2) 外联样式表
      <style>既是标签名,也是属性名。

二、MIME类型:

-作用 - 规定当前文档的具体使用类型是什么
-值:
   -html页面 - text/html
   -css文件 - text/css
   -JavaScript文件 - text/javascript
-1.与表单相关的
   - application/x-www-form-urlencoded
   - multipart/form-data
-2.与图片相关的
   - image/png
   - image/jpg
   - image/jpeg
   - image/gif
-3.与文本相关的
   - text/plain

三、CSS选择器

作用:定位HTML页面中的标签
举例:
     h1,h2 {
                color: lightsalmon;
                font-size: 84px;
            }
1.{}-表示声明块/组
2.CSS声明包含:  样式属性:值
3.注意:  :(冒号)和;(分号)都是英文状态下的。
          冒号表示分隔符,分号表示结束符。

原文地址:https://www.cnblogs.com/jlfw/p/12203613.html

时间: 2024-08-02 23:27:21

HTML表单元素及CSS的相关文章

自定义常用input表单元素三:纯css实现自定义Switch开关按钮

自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面先放HTML代码,看下DOM结构: <input type="checkbox" id="my_switch" class="my_switch"> <label for="my_

使用CSS来渲染HTML的表单元素

效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> <style type="text/css"> input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px soli

CSS之表单元素

表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站</h3> 3                         <form> 4                                 所有的表单内容,都要写在form标签里面 5                         </form> 6          

表单元素

1.单行文本框<input type="text"/>(input 的type 属性的默认值就是"text") <input type = "text" name="名称"/> 以下是单行文本框的主要属性: size:指定文本框的宽度,以字符个数为单位:在大多数浏览器中,文本框的缺省宽度是20个字符. value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击<input type=&q

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML之学习笔记(十)表单元素

html表单元素的基本格式为(必须包含在form标签中) 大致可以分为文本类.按钮类.复选框和单选框.文件选择几类 1.文本类 文本框标签<input type = “text“ />,属性size文本框的宽度.maxlength可输入的最大字节长度.readonly=“readonly”文本只读,无法修改 密码框标签<input type = “password” />,在页面显示为黑色小圆点 隐藏标签(隐藏域)<input type=“hidden” />,不会对页

jQuery选取表单元素

表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input>元素. :checkbox             type属性值为checkbox的<input>元素.使用$([type="checkbox"])能获得更高的性能. :checked               选中的单选按钮和复选框元素. :disabled    

ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2在js中用keyup事件来进行操作 3创建ajax格式和内容:格式: $.ajax({ url:"哪一个服务端处理器", data:{"自己起名",所需要传给处理器的数据}, type:"post", dataType:"json"

第六十七节,html表单元素

html表单元素 学习要点: 1.表单元素总汇 2.表单元素解析 本章主要探讨HTML5中表单元素,表单元素用于获取用户的输入数据.   一.表单元素总汇 HTML5的表单中,提供了各种可供用户输入的表单控件.           元素名称                                        说明             form          表示HTML表单             input         表示用来收集用户输入数据的控件