表格和其他的一些学习

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

那现在就先说说这些小的方面吧。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>

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