HTML 表格表单

表格:

table 所有的表格元素 都在table标签里面编写
属性: 写在标签内部
border: 声明 表格边框

标题 没有边框
表格行 没有边框
只有表格单元格 有边框

\color{orange}{注意:}border 有数值 里面的数值 控制最外面的边框是 table 独有属性

cellspacing: 控制单元格之间的距离 是 table 独有属性
cellpadding:控制单元格内部的内边距
caption 编写表格标题 文字居中
thead 定义表头行
th 定义 表头行 里面的 标准单元格 文字居中 文字加粗
tbody 定义 表格内容区域
tr 定义表格行
td 定义 表格 标准单元格 列
tfoot 定义表格尾部 也是行
\color{orange}{注意:} 单元格没有特殊标签 就使用 td

rowspan: 行合并, 将下面行的 同列 单元格 合并到 本身单元格中,
被合并的单元格 不在下面行出现(被合并的单元格 不用再写td)

colspan:列合并, 将 同行 单元格 合并到 本身单元格中,被合并
的单元格 不在同行出现(被合并的单元格 不用再写td)

          <table></table>    表格
           <caption> </caption>     表格标题
           <thead></thead>    表格头 
           <th></th>     表头单元格
           <tbody></tbody>    表格主体
           <tr></tr>      表格行
           <td></td>     标准单元格
           <tfoot></tfoot>     表格尾部

表单 from:

属性:
action 定义 提交的网址
method 定义 请求方式

get
优点:速度快 给服务器造成的压力小
缺点:保密性差 传输的文件大小有限制

post
优点:保密性好 可以上传大文件
缺点:给服务器造成的压力大 速度慢

input 元素

属性:
name: 定义 input元素的名称 作为提交给服务器的参数名
value: input元素的值 作为提交给服务器参数名所对应的值

类型:

text 文本
placeholder 定义 文本框内 默认展示的值
password 密码框 在里面输入的值会以星号 或者圆点展示
buttom 普通按钮
checkbox 复选框
radio 单选框
number 数字输入框
checked 默认选中
file: 上传文件
reset 重置 清空表单中已输入的内容
submit 提交按钮 向服务器发送 表单数据 发送向action 设置的提交页面
select/option 下拉菜单 创建多选单选菜单 必须组合使用

textarea: 定义多行的文本输入控件
cols :定义文本宽度
rows:定义文本行数

表单初始化:
            form{
                   margin:0;
               }
            input{
                   outline:0   清除选中状态下的蓝色外边框 使用 
                   margin:0;
                   padding:0;
               }

           select{
                    margin:0;
              }

           textarea{
                    margin:0;
                    padding:0;
                    outline:0   清除选中状态下的蓝色外边框 使用 
                    resize:none;  设定 用户无法自己调节大小
                    overflow:auto;  超出隐藏
               }
表单新增类型:
email 用来填写邮件地址
url 用来填写网址
range 设置滑动条
date 设置日期
month 设置年月
week 设置周数
time 设置时间
datetime 日期时间控件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 表格、表单、列表 能够利用表格、列表和表单完成注册页面的综合案例 能出说表格用来做什么的 能说出列表用来做什么的 ...
    _刘彦辉阅读 838评论 0 0
  • 何为表格 在Web的历史中,HTML的表格发挥了极大的作用。最 初创建表格就是为了以表格的形式显示数据,后来表格 ...
    HDhandi阅读 942评论 0 0
  • HTML表单详解 网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服...
    抱着熊喵啃什么阅读 2,003评论 0 5
  • a标签的认识 ’#‘号跳转页面内锚点跳转外部网页跳转内部网页 a标签的伪协议 img的认识 img是一个单标签 ...
    夜景阑姗阅读 618评论 0 0
  • 一.表格特殊的显示方式 1.基本语法 tr---table rowtd---table data 2.属性 ①ta...
    栗子树下_阅读 480评论 0 0