前端页面field_网页前端(5)表单及表格
表单的基本设置
表单
现实生活中的表单是用来提交信息的,比 如:办理银行卡填写的申请表、找工作填 写的简历、入学时填写的个人信息表。这些都是表单的一种。
网页中的表单是用来向服务器提交信息的, 我们最常用到的表单就是baidu的搜索框。
在搜索框填入关键字后,点击搜索按钮,关键字会提交到baidu的服务器, 服务器根据用户输入的关键字进行检索,返回相应信息
表单项
>文本框
密码框
多选框
单选框
提交按钮
下拉列表
北京
input
input是我们使用的最多的表单项,它可以 根据不同的type属性呈现不同的状态。
type可选值
text:文本框
password:密码框
submit:提交按钮
radio:单选按钮
checkbox:多选框
reset :重置按钮
select,option
select用于创建一个下拉列表.
option表示下拉列表中的列表项.
optgroup用于为列表项分组。
textarea
textarea用来创建一个文本域,实际效果和 文本框类似,只是可以输入多行数据。
可用属性:
cols:文本域的列数
rows:文本域的行数
fieldset、legend、label
fieldset用来为表单项进行分组。
legend用于指定每组的名字。
label标签用来为表单项定义描述文字。
html表格
table常用标签
1、table标签:声明一个表格
2、tr标签:定义表格中的一行
3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
table常用属性:
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
传统布局:
传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:
1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
传统布局目前应用:
1、快速制作用于演示的html页面
2、商业推广EDM制作(广告邮件)
前端页面field_网页前端(5)表单及表格相关推荐
- 前端_网页编程 Form表单与模板引擎(下)
目录 续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
- 前端_网页编程 Form表单与模板引擎(中)
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点 五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
- 前端_网页编程 Form表单与模板引擎(上)
目录 一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
- html前台多文本框布局,网页前端(5)表单及表格
表单的基本设置 表单 现实生活中的表单是用来提交信息的,比 如:办理银行卡填写的申请表.找工作填 写的简历.入学时填写的个人信息表.这些都是表单的一种. 网页中的表单是用来向服务器提交信息的, 我们最 ...
- 视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- web前端必学功法之一:表单校验(1)
web前端必学功法之一:表单校验 案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
- html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单 发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
- web前端必学功法之一:表单校验(2)
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
- autojs遍历当前页面所有控件_HTML5表单和表单控件的使用
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...
- html表单对于网页目地,html - 表单form
一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
最新文章
- Centos nginx 安装 源码方式安装
- 安装vsftpd-3.0.2.tar.gz源码
- TFS2012 服务器安装
- 总结get和post区别
- Linux守护进程的创建(结合nginx框架)
- Top 10 Digital Transformation Trends For 2020
- 高性能MySQL(第二版)第三章 架构优化和索引(上)——读书笔记
- hihoCoder #1349 Nature Numbers
- PHP文件中定义加载资源文件
- c语言void调用不可作为,C语言的选择题.pdf
- Eclipse阿里巴巴Java开发规范插件安装
- 有关vc++ 时钟程序的学习与体会
- mysql lpad_MySQL LPAD字符串填充函数使用简介说明
- Nodejs Promise 读书笔记
- Powershell 操作Excel的基本命令
- 图像处理:直方图规定化
- 震惊:七成人对薪资不满,多劳并非能多得
- 【听】告別玻璃心的十三件事,走出舒适圈
- 笔记本电脑插上电源合盖子不睡眠不锁屏只是关闭了屏幕
- 大规模图像检索深度特征:Large-Scale Image Retrieval with Attentive Deep Local Features
热门文章
- android 弹幕礼物,Android的简易弹幕
- snprintf实现_高斯模糊的GLSL实现
- python lxml_python – lxml使用命名空间而不是ns0,ns1,
- springboot 打 jar 包分离依赖 lib 和 配置文件
- css选择器总结(内附实例及截图)
- 使用 Fiddler 分析网页加载过程
- 分布式锁的原理和实现详解
- Oracle Telnet 1521 失败
- SPOJ Problem 1419:A Game with Numbers
- spring 中beanFactory和ApplicationContext的区别