表单属性、标签
总结
一、 表单概述
- 1. 什么是表单:表单是一块可采集用户数据的区域:表单对后端开发者至关重要
- 2. 如何创建表单区域:
a) 用form元素表示表单
b) 用action属性表示表单的提交地址
c) 用method属性表示表单的提交方式
d) 在制作静态页面时,可不用书写上述的属性
e) 在制作静态页面时,建议不要设置form元素的样式
- 3. 表单中可放置哪些元素
a) 对于静态页面的开发者,表单只是一个普通的块盒,内部可放置任何元素
b) 通常情况下,表单中会放置一些可以与用户进行交互的元素
文本框 <input type=”text”>
点击按钮 <input type=”buttont” value=”点击”>
提交按钮 <input type=”submit” >
复选框 <input type=”checkbox” name =”” value=””>
单选框 <input type=”radio” name =”” value=””>
文件上传 <input type=”file”>
密码 <input type=”password”>
重置按钮 <input type=”reset”>
隐藏 <input type=”hidden” name =”” value=””>
数字框 <input type=”number” min =”” max=”” step=””>
滑块数字 <input type=”range” >
日期框 <input type=”date” >
年月框 <input type=”month” >
一年中的第几周 <input type=”week” >
时间 <input type=”time” >
下拉列表:<input type=“text”id=“”list=“a”>
<datalist id=”a”>
<option value=””></option>
<option value=””></option>
</datalist>
<select name=”” id =””>
<option value=””></option>
<option value=””></option>
</select>
分组 <opegroup></opegroup>
多行文本
<textarea name=”” id=”” rows=”” cols=””></trxearea>
分组信息
<fielaset>
<legend></legend>
<legend></legend>
</fielaset>
属性:name:发送到服务器的键名 value:发送到服务器的值
Maxlength:长度 required:要求必须填
Pattem:填写规则 disabled:禁用
Placeholder:提示 readonly:只读
Autocomplete:自动识别 selected:选择
Size:展示个数 <label></label>关联
由于这些交互元素通常出现在表单中,因此,我们常称之为表单元素
- 4. 表单元素的两个重要属性
name属性:表示发送到服务器的键名
value属性:表示发送到服务器的值
二、 表单元素—文本框
使用input元素表示一个文本框:input是一个空元素
可通过type属性设置文本框类型
三、 表单元素—按钮
1) 使用input元素或button元素表示按钮
2) 按钮有很多种
a) 普通按钮:点击后没有任何额外的效果
b) 重置按钮:必须出现在表单中,点击后将其他表单元素重置为初始值
c) 提交按钮:必须出现在表单中,点击后会将表单数据提交到服务器
d) 图片按钮:功能同提交按钮一样,只不过样式为一张图片,该按钮已很少使用
3) input和button的比较
a) input是空元素,button是普通元素
b) input是旧版本中的元素,button是HTML5中的元素
c) input按钮中只能写文本,button的内容更加丰富
d) input的兼容性更好,button稍差
四、 表单元素—下拉列表
使用select和option元素的组合表示下拉列表
下拉列表的类型:普通的下拉列表
选项分组的下拉列表
五、 表单元素—数据列表和多行文本框
使用datalist元素表达数据列表
使用textarea元素表达多行文本框
<textarea name=”” id=”” rows=”” cols=””></trxearea>
六、 表单元素的分组和状态
使用fieldset和legend元素,对表单内容进行分组
使用disabled属性和readonly属性,设置表单元素的可用状态
七、 美化表单元素
1、 伪类focus:表示聚焦时候的样式,常用于表单元素
2、 认识表单元素的默认样式
表单元素均默认为行盒——水平排列
表单元素均为可替换元素——可设置盒模型中各个部分的尺寸
文本框聚焦时会有outline
原文地址:https://www.cnblogs.com/caoxiangwang/p/11372426.html
- 编程的智慧特点
- 【机器学习】机器学习大白话
- 回归分析技术|机器学习
- 用PHP蜘蛛做旅游数据分析
- 一秒找出用时间和随机数生成的上传文件名
- Java之集合的遍历与迭代器
- Java之字符串String,StringBuffer,StringBuilder
- JavaScript深入浅出补充——(一)数据类型,表达式和运算符
- Oracle数据库(一)概述、基础与简单操作
- Oracle数据库(二)常用关键字以及函数
- Oracle数据库(三)表操作,连接查询,分页
- 正式学习第一天下午——基础标签及其属性
- 正式学习第二天上午——常用标签及列表 0605
- Java之面向对象例子(三) 多态,重写,重载,equals()方法和toString()方法的重写
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux中各种锁机制的使用与区别详解
- Linux环境下使用glog日志库的方法
- crontab执行时间与系统时间不一致问题解决
- Linux内核设备驱动之proc文件系统笔记整理
- CentOS7.6系统下使用yum配置lnmp环境的方法
- Linux内核设备驱动之高级字符设备驱动笔记整理
- Linux使用scp命令进行文件远程拷贝详解
- Linux内核设备驱动之Linux内核模块加载机制笔记整理
- linux无损扩容的方法
- Linux内核设备驱动之内核的时间管理笔记整理
- 使用squid搭建http和https的代理服务器设置指南
- linux中gdb的入门使用教程
- Linux命令中Ctrl+z、Ctrl+c和Ctrl+d的区别和使用详解
- Linux lseek函数的使用详解
- Nginx出现500 Internal Server Error 错误的解决方案