HTML03——列表_表格_表单

最新推荐文章于 2023-12-17 11:32:33 发布
最新推荐文章于 2023-12-17 11:32:33 发布
阅读量467 收藏 2
点赞数 1
分类专栏： HTML 文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiao39gs/article/details/107700996
版权

目录

列表

无序列表

有序列表

自定义列表

表格

表单

form标签

下拉框

文本区域标记

按钮

Lable标签

例子

列表

无序列表

  • <ul type="><li></li></ul>
  • 默认样式通常是黑色的实心小园圈 disc
  • circle 空心小园圈 square 小方块

有序列表

  • <ol type="" start="><li></li></ol>
  • Type属性取值：A a i 1

自定义列表

自定义列表不是一个项目的序列，它是一系列条目和它们的解释。有序列表以<dl>标签开始，自定义列表条目以<dt>开始，自定义列表的定义以<dd>开始。

表格

  • < table>标签属性
    • width、height、bordercolor、bgcolor
    • border、cellspacing、cellpadding、align
  • <tr>标签属性
    • width、height、bordercolor、bgcolor
    • border、align、valign
  • <td>标签属性
  • colspan 横跨的列数（合并列）
  • rowspan 横跨的行数（合并行）
  • <th> 表头 默认显示为加粗，和<td>用法一样
  • <caption> 表格标题
  • <thead>
  • < tbody>
  • <tfoot>
  • 如果使用 thead、tfoot 以及 tbody元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。必须在tabe元素内部使用这些标签。

eg:课程表

表单

表单是Web浏览器和Web服务器进行通信的最常用的手段，即通过表单，浏览器不仅能从Web服务器中获得信息，而且还能向Web服务器反馈信息。HTML为此提供了表单（Form）元素来设计和实现这种交互界面。

表单形成的交互界面上有许多元素，负责收集用户输入的各种信息，这些元素一般称为控件。

  • 单行/多行文本框
  • 复选框
  • 单选按钮
  • 文件域
  • 隐藏域
  • 下拉菜单
  • 提交按钮
  • 重置按钮

form标签

属性：

  • action 提交的地址
  • method 提交的方式
    • GET:
      是将编码好的表单数据追加到请求该页的URL中，通常，浏览器的默认方法为GET方法。URL的长度限制在8192个字符以内。所以不要使用GET方法发送长表单，如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果，而且，在发送机密用户名和密码、信用卡号或其他机密信息时，不要使用GET方法。用GET方法传递信息不安全
    • POST
      POST在HTTP请求中嵌入编码好的表单数据，长度由HTTP请求中的CONTENT_LENGTN定义
  • name 规定表单的名称
  • enctype
    • application/x-www-form-urlencoded在发送前编码所有字符（默认）
    • multipart/form-data不对字符编码。在使用包含文件上传控件的表单时，必须使用该值
  • target
    • 接受数据的页面以哪种方式打开

下拉框

HTML是过<select>和<option>标记来定义输入列表框的

  • 列表框标记<select>是成对出现标记，首标记<select>和尾标记</select>之间的内容就是一个列表框的内容
  • <option>标记用于定义列表框中的各个选项

<select>标记属性有：name,size和multiple，其中name属性是不可缺省的

  1. name属性  用于指定输入列表框的名字
  2. size属性  size属性是可选的，用于定义列表框的长度。size属性的参数值是数字，表示显示在列表框中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该列表框添加滚动条，用户可以使用滚动条来查看所有的选项。size属性的缺省值为1
  3. multiple属性表示可以多选，如果不设置本属性，那么只能单选；按Ctrl可以多选用法：multiple="multiple"

文本区域标记

HTML用<textarea>标记来定义高度超过一行的文本输入框。< textarea>标记是成对出现标记，首标记< textarea>和尾标记</textarea>之间的内容就是显示在文本输入框中的初始信息。< textarea>标记属性：NAME、ROWS和COLS

  1. name属性  用于指定文本输入框的名字。
  2. cols属性  COLS属性用于规定文本输入框的宽度。属性的参数值是数字表示一行所能示的最大字符数。如果输入信息中有一行或几行的字符数大于COLS属性的参数值，浏览器会为该文本输入框添加水平滚动条
  3. rows属性  ROWS属性用于规定文本输入框的高度。属性的参数值是数字，表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是当输入信息的行数小于或等于ROWS属性的参数值时，滚动条将不起作用

按钮

  • <input type="submit">
  • <input type="reset">
  • <input type="button">

属性：

  • value  按钮中默认显示的内容
  • name 用于表单提交

Lable标签

用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

例子

填写用户信息页面

<!DOCTYPE html>
<html>
<head>
	<title>表单</title>
</head>
<body>
	<form method="get" action="指定表单发到哪里">
		<!-- name为该元素传送到服务器时的解释/名称 -->
		<!-- value为默认的内容，可以删改 -->
		用户名：<input type="text" name="name" value="我是默认的内容">		<!-- 文本域 -->
		<br>
		<label for="pwd">密码：</label><input id="pwd" type="password" name="pwd">	<!-- 密码 -->
		<br>
		<!-- 单选框加一样的name，value指定name所对应的值 -->
		性别：男<input type="radio" name="sex" value="0">女<input type="radio" name="sex" value="1">	<!-- 单选框 -->
		<br>
		<!-- 复选框在name后加中括号 -->
		<!-- checked="checked"为默认选中 -->
		爱好：篮球<input type="checkbox" name="hobby[]" value="1">	<!-- 复选框 -->
		足球<input type="checkbox" name="hobby[]" value="2" checked="checked">
		排球<input type="checkbox" name="hobby[]" value="3" checked="checked">
		乒乓球<input type="checkbox" name="hobby[]" value="4">
		<br>
		个人照片：<input type="file">	<!-- 文件域 -->
		<br>
		个人简介：<textarea name="info" rows="5" cols="30"></textarea>	<!-- 文本区域 -->
		<br>
		<!-- selected="selected"为默认选中项 -->
		注册目的：<select name="target" size="2" multiple="multiple"
>
			<option value="jiaoyou">交友</option>
			<option value="yule">娱乐</option>
			<option value="daoluan" selected="selected">捣乱</option>
			<option value="dontknow">！@#￥</option>
		</select>	<!-- 下拉框 -->
		<br>
		<input type="submit" value="提交信息">	<!-- 提交按钮 -->
		<input type="reset" value="重新写">		<!-- 重置按钮 -->
		<br>
		<input type="button" value="button按钮">	<!-- 按钮 -->
		<input type="hidden">	<!-- 隐藏域 -->
	</form>
</body>
</html>

rjbp40ht
关注
专栏目录
前端——列表、表格、表单
Bingtangbgd的博客
05-08 1451
前端——列表、表格、表单
HTML_表格和表单 ——恋天小结
xiao_yi_8421的博客
08-13 419
1. 表格标签(重点) 表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 在上面的语法中包含三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对
select一些常用属性
lcathm的专栏
05-25 6198
1.:size：表示在页面显示的个数，在ie中有效，在chrome中无效                     multiple:可以实现多选，CTRL/SHIFT来选择，该属性可以不用赋值。 2.：value:如果没有指定value值，则回提交元素中的文本信息，否则提交value中设定的值 无标题文档 下拉框 北京     上海（默认）
EduCoder-Web程序设计基础-html5— 创建下拉列表-第2关：创建下拉列表
weixin_51402180的博客
12-06 723
目录任务描述相关知识编程要求测试说明代码示例 任务描述 本关任务：在WEB表单中创建下拉列表选择框 相关知识 为了完成本关任务，你需要掌握：使用select元素和option元素来创建一个下拉列表选择框 创建下拉列表 select 元素可创建单选或多选菜单，可以通过size属性来设置选择框的行数。 option元素用于定义列表中的可用选项。 提示：select 元素是一种表单控件，可用于在表单中接受用户输入。 示例 创建下拉列表 上海 北京 湖北
下拉列表框标记p24
Txwtech笛克特科
03-30 787
&lt;html&gt; &lt;head&gt; &lt;title&gt;下拉列表框标记&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 下拉列表框： &lt;select name="select"&gt; &lt;option&gt;数码相机区域&lt;/option&gt; &lt;option
在HTML中，标记的Size属性最大取值
hffygc的博客
02-04 4345
在HTML中，标记的Size属性最大取值
在html语言中,编号列表的标记是,关于列表标记的详细介绍
weixin_34824634的博客
05-31 970
HTML5 的基本标记有很多种，今天介绍列表标记列表标记 列表标记可以在网页中以列表形式排列文本元素, 列表标记有3种： 有序列表，无序列表，自定义列表像: 苹果桃 称为无序列表， 在FireFox以a,b,c 等显示,其他浏览器以圆点显示; &1. HTML5 之2__列表标记简介：列表标记 列表标记可以在网页中以列表形式排列文本元素, 列表标记有3种： 有序列表，无序列表，自定义列...
HTML——表格 表单
m0_72959610的博客
08-25 654
css 表格表单
HTML标记语言——表单
01-19
上文：标记语言——引用 原文出处 chapter 5 表单 互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从使用者那里收集资料,因此在设计网站时总是属于任何状况都...
html入门——列表、表格、表单
最新发布
Kingdom_66的博客
12-17 941
标签：dl嵌套dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。以及像这种一个标题下有多个小分类的列表，通常要使用定义列表。
SQL基础：字段属性
发现之旅
08-14 2861
 上一节介绍了如何建立包含不同类型字段的表。在这一节中，你将学会如何使用字段的三个属性。这些属性允许你控制空值，缺省值和标识值。允许和禁止空值    大多数字段可以接受空值（NULL）。当一个字段接受了空值后，如果你不改变它，它将一直保持空值。空值（NULL）和零是不同的，严格的说，空值表示没有任何值。为了允许一个字段接受空值，你要在字段定义的后面使用表达式NULL。例如，下面的表中两个字段都允许
PyQt(Python+Qt)学习随笔：Qt Designer中部件的三个属性sizeHint缺省尺寸、minimumSizeHint建议最小尺寸和minimumSize最小尺寸
老猿Python
10-20 3689
在Qt Designer中的每个部件，要调整部件大小，需要关注三个部件大小相关的属性：sizeHint、minimumSizeHint、minimumSize： 1、sizeHint：为布局管理器中部件的缺省大小，如果部件不在布局管理中就为无效的值，该值是Qt中对每个部件大小的建议值，也是缺省值，不能修改； 2、minimumSizeHint：为Qt推荐的部件最小大小，如果部件不在布局管理中就为无...
小心使用select的length属性
maypol的专栏
03-12 5208
本文主要讲述两点: 1.select在只有一个和多个的时候length代表的意义是不一样的 2.怎么让length具有唯一的意义. 先让我们看两个例子 例1: sfdsf ghjgfhfg qwewqe click me 例2: sfdsf ghjgfhfg qwewqe sfdsf ghjgfhfg qwewqe click me 点击例1和例2的两个button
select下拉单 设置multiple属性确定展开 size属性确定展开数
weixin_30633405的博客
04-27 739
Document <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> option{ height:30px; line-height...
html select与option标签
weixin_33913332的博客
07-12 284
1、select 元素 select 元素可创建单选或多选菜单。&lt;select&gt; 元素中的 &lt;option&gt; 标签用于定义列表中的可用选项 常用属性如下： autofocus：规定在页面加载后文本区域自动获得焦点。 disabled：规定禁用该下拉列表。 form：规定文本区域所属的一个或多个表单。 multiple：规定可选择多个选项。 name：规定下拉列...
HTML---下拉框、列表框使用详解（select 与 option）
热门推荐
weixin_45609811的博客
09-27 5万+
select创建列表框和下拉菜单， 必须与option 结合使用 select 属性： disable 禁用 multipe 列表框和下拉框是否允许多选 ，支持boolean值属性，为true时则为列表框 size 列表框可同时显示多少个列表项 select 能包含的子元素 option 属性 disabled 禁用 selected 初始状态是否被选中 optgroup 单项组，也就...
通过jQuery给select元素的option标签添加自定义属性
我的博客
05-02 1万+
有时候需要个option标签传递多个值，仅仅依靠value属性是不够的，因此通过给select元素的option添加新的元素，来获取多个值。 &lt;select name="city" id="city_id" onchange = "setAct(this)"&gt; &lt;option value="1" code="0531" &gt;济南&lt
html下拉表单
行善之人必有余庆
05-25 3108
插入表单 兴趣调查 选择你喜欢的音乐: 摇滚 流行 爵士 民族 打击 北京 上海 南京
layui表格监听全选_layui学习笔记——监听表格复选框选择
05-26
在 layui 表格中，可以通过监听复选框的选择来实现批量操作等功能。具体实现步骤如下： 1. 在表格中添加复选框列，并设置lay-skin属性为primary，表示使用layui风格的复选框。 ``` <table class="layui-table" lay-data="{...}"> <colgroup> ... <col width="50"> </colgroup> <thead> ... <th lay-data="{field:'checkbox', width:50, templet:'#checkboxTpl'}"></th> </thead> <tbody> ... </tbody> </table> <script type="text/html" id="checkboxTpl"> <input type="checkbox" lay-skin="primary"> </script> ``` 2. 在JavaScript代码中监听复选框的选择事件，可以使用layui的form模块来实现。需要注意的是，由于表格是动态生成的，所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj.checked); // 当前是否选中状态 console.log(obj.data); // 原始数据 console.log(obj.type); // 类型，如果行选则为：row，如果全选则为：all，如果取消选择则为：uncheck console.log(table.checkStatus('test').data); // 获取选中行的数据 }); // 重新渲染表单元素 form.render(); }); ``` 3. 表格中如果存在分页，则需要在分页时重新渲染表单元素。 ``` table.on('page(test)', function(){ form.render(); }); ``` 以上就是监听表格复选框选择的实现方法。需要注意的是，表格中的复选框列必须有唯一的字段名，否则无法在JavaScript代码中获取选中行的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值