码迷,mamicode.com
首页 > Web开发 > 详细

HTML表单

时间:2020-05-10 18:46:14      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:ott   空白   获取   justify   set   结构   method   语法   class   

[目录]

一、基础表格

<table>表格
<tr>行
<td>单元格

基本语法与结构

<table>                     <!--表格开始-->
    <tr>                    <!--tr行标签-->
        <td>……</td>         <!--td单元格-->
        ……
    </tr>
    ……
</table>                    <!--表格结束-->

二、表格操作

  1. 带表头的表格:
    <th>……</th> <!--表格头,内容居中,加粗显示-->

  2. 带标题的表格:
    <caption>……</caption> <!--表格标题居中显示-->

  3. 带结构的表格

    • thead:表格的头,放表格的表头
    • tbody:表格主体,放数据本体
    • tfoot:表格的脚,放表格的脚注
  4. <table>表格属性

属性
描述
width px/% 规定表格的宽度
align left/right/center 表格相对周围元素的对齐方式
border px 规定表格边距的宽度
bgcolor rgb(x,x,x)/#xxxxxx/colorname 表格的背景颜色
cellpadding px/% 单元边沿与其内容之间的空白
cellspacing px/% 单元格之间的空白
fram 属性值 规定外侧边框的哪个部分是可见的
rules 属性值 规定内侧边距的哪个部分是可见的
  1. <tr>标签属性
属性
描述
align left/right/center/justify 行内容的水平对齐
valign top/middle/bottom 行内容的垂直对齐
bgcolor rgb(x,x,x)/#xxxxxx/colorname 行的背景颜色
width px/% 单元格的宽度
heigh px/% 单元格的高度
  1. 跨列属性:colspan
  2. 跨行属性:rowspan
  3. 表格嵌套:
    • 完整表格结构
    • 放到<td>标签
  4. 注意:尽量少使用表格嵌套,尽量少的使用表格跨行跨列

三、HTML表单

  1. 语法
<form>
    表单元素
</form>
  1. HTML表单
    form标签中,以下标签实现表单元素添加
标签
描述
<input> 表单输入标签
<select> 菜单和列表标签
<option> 菜单和列表项目标签
<textarea> 文字域标签
<optgroup> 菜单和列表项目分组标签
  1. <input>标签:
    <input type="类型属性" name="名称" …… />
Type属性值
描述
text 文字域
password 密码域
file 文件域
checkbox 复选框
radio 单选框
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏域
image 图像域
  1. 单行文本域
Type属性值
描述
name 文字域的名称
maxlength 指用户输入的最大字符长度
size 之文本框的宽度,以字符个数为单位,文本框的缺省宽度是20个字符
value 指定文本框的默认值
placeholder 规定用户填写输入字段的提示
  1. 多行文本域
Type属性值
描述
name 文字域的名称
placeholder 规定用户填写输入字段的提示
rows 文本区内的可见行数
cols 文本区内的可见宽度
  1. 表单工作原理:访问一个包含表单的页面,输入数据后“提交”表单,浏览器将用户在表单中输入的数据进行打包,并发送给服务器,服务器接收数据并转由程序处理
  2. <form>标签
<form action="" method="" name="" …… >
    表单元素
</form>
属性
描述
action url 提交表单时向何处发送表单数据
method get/post 设置表单以何种方式发送到指定页面
name form_name 表单的名称
target _blank_self_parent_top 在何处打开action URL
  1. GET和POST的区别
    • GET:使用URL传递参数,对所送信息的数量也有限制,一般用于信息获取
    • POST:表单数据作为HTTP请求体的一部分,对所发送信息的数量无限制,一般用于修改服务器上的资源

四、必备基础

  1. <div>和<span>
    • <div>标签是一个区块容器标记,<div></div>之间是一个容器,可以包含段落、表格、图片等各种HTML元素
    • <span>标签没有实际意义,为了应用样式
  2. HTML标签

块级标签:占据一行、换行

<div><ul><ol><li><dl><dt><dd><h1>~<h6><p><form><hr>

行内标签:在一行,不换行

<b><em><img><input><a><sup><sub><textarea><span>

HTML表单

标签:ott   空白   获取   justify   set   结构   method   语法   class   

原文地址:https://www.cnblogs.com/yujiao-99/p/12864499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!