表格和其他的一些学习

今天主要讲了三个方面的内容，其中穿插着一些小的知识点，大内容主要有下拉菜单、隐藏域和表格三个方面的，其中还包括文件选择框等等。

那现在就先说说这些小的方面吧。1、文件选择框：可以选择你想要的文件，其中里面有属性accept是用来指定可选择的文件的属性，如下：

<formenctype="multipart/form-data">
选择你的文件：<inputtype="file"accept="image/*">
</form>

enctype="multipart/form-data"是指定对应上传文件表单的属性。

文件选择框就是这些了。

现在就来介绍下拉列表，使用下拉列表主要是节省空间，使页面更加简洁，也更方便规范；代码如下：

<select><option>请选择省市区</option><option>上海</option><option>嘉兴</option><option>苏州</option><option>郑州</option><option>上饶</option>
</select>

用<form>制作一个表单，用<select>标签定义一个下拉列表，<option>标签是定义下拉列表中的一个选项；虽然上面的代码中没有name属性，但是在<select>标签中name属性是定义了提交的参数名。

<select>还可以设置多选，用multiple属性来实现，比如：

你喜欢的颜色有：
<select name="color"multiple><option value="red">红色</option><option value="blue">蓝色</option><option value="green">绿色</option><option value="black">黑色</option><option value="yellow">黄色</option>
</select>

图片：

其中还有size属性定义下拉框显示的选项个数，当设置的数字小于实际选项个数时，会自动增加一个滚动条的。

2、textarea和fieldset

（1）textarea（文本域）：用于创建多行文本出入控件，在<texterea>和</texterea>之间的内容是该多行文本框的初始值，有三个属性：name（指定文本区域的名称）、cols（指定编辑区域的行数）、rows（指定编辑区域的列数）。

您的意见对我很重要
<textarea name="info" rows="7" cols="35">请将意见写入此区域
</textarea>

（2）fieldset：

①fieldset 元素可将表单内的相关元素分组；会在相关元素周围绘制边框。

②<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

③当一组表单元素放到<fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<legend>标签为 fieldset 元素定义标题

<fieldset><legend>health information</legend>height:<input type="text">weight:<input type="text">
</fieldset>

3、隐藏域

hidden属性可以隐藏表单中你不需要写或看到的东西，但是在你的url中还是会显示你所隐藏的内容

（表单中的隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示，当浏览者提交表单时，隐藏域中的内容会被一起提交给处理程序。）

<form action="result.html" method="get"><input type="hidden" name="stuNo" value="1502010205"><br/><br/>原密码：<input type="password" name="old"><br/><br/>新密码：<input type="password" name="new"/><br/><br/><input type="submit" value="修改密码"/>
</form>

4、这其实是对method中的两种提交方式的总结：

get：用get提交方式，在地址栏中还可以看到提交的参数；

post：用post提交方式，地址栏是看不到提交的参数的。

5、表格

表格（table）的组成部分有：标题<option>、表头<thead>、主体<tbody>和表尾<tfoot>。其中还有一些属性，定义一行(<tr>)、定义一个数据项(<th><td>)、可以加粗，用于表头的(<th>)和用于表格主体部分，没有加粗样式的(<td>);<td>中的rowspan和colspan分别是定义单元格跨行、跨列的行数和列数。

<table border="2"cellspacing="0" cellpadding="5"><thead><tr><th>序号</th><th>设备或材料名称</th><th>品牌</th><th>规格型号</th><th>数量</th><th>单位</th><th>单价</th><th>小计</th><th>产品技术参数</th></tr></thead>
<tbody><tr><td>3</td><td>42服务器机柜</td><td>图腾</td><td></td><td>1</td><td>架</td><td></td><td>0</td><td></td></tr>
</tbody>

<tfoot><tr><td colspan="2" align="center">合计：</td><td colspan="4" align="center"></td><td colspan="2" align="center">70000</td><td>柒万元整</td></tr></tfoot>
</table>

今天就学了这么多的内容，感觉这一天过的很充实，虽然时间会有点赶，但还是会觉得很高兴，看着我写的内容在网页上显示出来，感觉很有成就感，我会更加努力的！！

表格和其他的一些学习相关推荐

表格大小设置_系统地学习Excel第18课，设置单元格字体格式
上一篇:系统地学习Excel第17课,设置单元格格式本篇内容结构如下: 本篇在章节中的位置单元格字体格式包括字体.字号.字形.颜色等.Excel中文版默认单元格: 字体为[宋体]或[等线]: 字号 ...
layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表，并实现动态更新
layui学习--数据表格嵌套下拉列表,并实现动态更新项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废 ...
c# 自定义甘特表格控件（原创学习中请指导）
本人想做一个甘特表格控件,主要实现如下功能: 1.表头为相关任务列和显示日期类形式(分月.周.日.时), 2.内容以甘特图一样显示计划和进度相关信息,根据计划开工和结束日期.计划时长和实际开工和结束 ...
图像整合到文件中_整合图像和表格数据以进行深度学习
图像整合到文件中 I recently participated in the SIIM-ISIC Melanoma Classification competition on Kaggle. In ...
艾宾浩斯记忆表格excel_Excel全年学习复习计划表(艾宾浩斯遗忘曲线)
最近准备考在职博士,刷刷学历,不得不又拿起必考的英语来,发现由于这几年敲代码,日常生活词汇忘了很多,只好买本考博词汇背诵,不过三十而立的人背起来确实费劲了,所以开始寻找好的背诵方法. 又想起了当年步步 ...
为何基于树的模型在表格型数据中能优于深度学习？
为何基于树的模型在表格型数据中能优于深度学习? FesianXu 20220908 at Baidu Search Team 前言基于树的模型(Tree-based model),比如GBDT,XG ...
3、Latex学习笔记之表格篇
目录表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...
学生每日计划表_小学生每日学习计划表格怎么制定
小学生每日学习计划表格怎么制定导读:小编根据大家的需要整理了一份关于<小学生每日学习计划表格怎么制定>的内容,具体内容:长期按学习计划办事,就会使每天的学习生活很有规律,甚至逐渐形成条件 ...
Web学习基础应用-可编辑表格
前文可编辑表格在JavaScript中是比较经典的基础应用,涉及的知识内容就是最普遍的增删改查的设计思路.我在基础学习的过程中学学到的就是拿到你一个作业的时候,先分析需求,构思完结构代码之后再进行消 ...

表格和其他的一些学习

表格和其他的一些学习相关推荐

最新文章

热门文章