CSS—表单的样式设置

input常用属性

type：input的类型
- text：文本输入框（明文输入）
- password：文本输入框（密文输入）
- radio：单选框
- checkbox：复选框
- button：按钮
- reset：重置
- submit：提交表单数据给服务器
- file：文件上传
maxlength：允许输入的最大字数
placeholder：占位文字
readonly：只读属性
disabled：禁用
checked：默认被选中（只有当type为radio或checkbox是可用）
autofocus：当页面加载时，自动聚焦
name：名字
- 在提交数据给服务器时，可用于区分数据类型
- 在单/复选框起到互斥的作用
value：取值
form：设置所属的form元素（填写form元素的id,一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器）
- action:用于提交表单数据的请求URL
- method:请求方法（get和post）,默认是get
  
  1.get:在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如
  
  http://ww.test.com/login?phone=123&password=234&sex=1
  
  由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB
  
  2.post:发送给服务器的参数全部放在请求体中
  
  理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）
- target:在什么地方打开URL（参考a元素的target）
- enctype
  
  规定了在向服务器发送表单数据之前如何对数据进行编码
  
  取值有三种：
  
  1.application/x-www-form-urlencode：默认的编码方式
  
  2.multipart/form-data :文件上传是必须为这个值，并且method必须是post
  
  3.text/plain：不常用
textarea缩放的CSS设置
- 禁止缩放：resize:none;
- 水平缩放：resize:horizontal;
- 垂直缩放：resize:vertical;
- 水平垂直缩放：resize:both;(默认状态)
select常用属性：
- multiple：可以多选
- size：显示多少项
option常用属性:
- selected：默认被选中

表单提交：将用户在input中输入的内容提交给服务器

1. 传统的表单提交(服务端渲染)

1.将所有的input包裹到一个form中

2.form设置action(服务器的地址)

3.input/button类型是submit

4.点击submit，自动将所有数据提交给服务器

弊端：1.会进行页面的跳转(意味着服务器必须提前将一个页面写好，并且将写好的页面返回给前端，前端直接展示这个页面)

2.不方便进行表单数据的验证

2.前后端分离(前端渲染和前端路由)

1.通过JavaScript获取到所有表单的内容

2.通过正则表达式进行表单的验证

3.发送ajax请求，将数据传递给服务器

4.验证成功后服务器会返回结果，需要前端解析这个数据，并且决定显示什么内容

需要用户写的内容无需写value,需要用户选择的必须写value不然服务器分辨不出选项内容

CSS—表单的样式设置相关推荐

CSS表单元素样式设置
(1)表单由两部分组成,访问者在页面上可看见并填写的控件.标签和按钮的集合,以及用于获取信息并将其转化为可以读取或计算的的格式的处理脚本. (2)表单创建,以form标签开始结束,开始和结束form标 ...
css表单光标宽度设置,如何改变表单控件光标颜色
表单大家应该不陌生,当然了,今天并不是来聊怎么做表单或者处理表单的样式网格.而是来聊聊怎么改变表单控件中光标的颜色.不知道在大家心中,表单控件的光标颜色是根据color属性来控制的.那么如果需要用CS ...
BPM实例分享：如何设置表单字体样式
系统版本:V10.0 一些业务场景中,时尔需要改变表单字体那如何设置表单字体样式? 本文将会针对全局表单和单个表单进行阐述! 1.全局表单: 修改WFRES\CSS\MvcSheet.css , ...
CSS特效（1）——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
php设置表单的字体,php表单标题怎么设置字体
php表单标题怎么设置字体关于网页字体的设置我们可以使用css样式来做,具体的属性是font-family.下面来看看怎么设置form表单的标题吧. 1.首先form里有一个h2标签,用来显示for ...
【Web前端HTML+CSS——表单知识点及相关案例】
文章目录表单元素 input元素 select元素 textarea元素按钮元素表单状态(可替换元素不能完全控制) 配合表单元素的其他元素 label datalist(存在兼容性问题,了解即可 ...
暑期学习日记19：CSS表单
通过使用 CSS,可以极大地改善 HTML 表单的外观,如: 使用 width 属性来确定输入字段的宽度. 使用 padding 属性在文本字段内添加空间. 使用 border 属性更改边框的粗细和颜 ...
div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
HTML5 JavaScript CSS 表单实现购物优惠打折
HTML5 JavaScript CSS 表单实现购物优惠打折文章目录 HTML5 JavaScript CSS 表单实现购物优惠打折前言一.CSS代码如下,通过外链接实现交互. 二.HTML5 ...