文本选择

4.12文本选择框

选择你的头像：<input
type="file"accept="application/jpeg"/>

选择你的头像：<input
type="file"accept="application/*"/>

简历：<input
type="file"accept="application/PDF"/>

 

 

Type指定file类型，可以选择文件。

Accept：选择文件的类型，例如PDF、jpge、gif指定可选择文件的类型。

<form
enctype="multipart/form-data"/>

上传文件需指定相对应表单的属性

4.12下拉列表

下拉列表的好处：

（1）节省页面空间，使得页面更加简洁

（2）方便输入

（3）规范输入

<select
name="province">

    <!--option选项的意思-->

    <option
value="33">浙江</option>

    <option
value="41">河南</option>

    <option
value="32">江苏</option>

    <option
value="36">江西</option>
</select>

<select>标签定义了一个下拉列表

<option>定义一个下拉选项

<select>标签的name属性定义了提交参数的名字

<option>标签的内容定义了该选项显示的文本，value属性定义了选中该选项时传递的参数值

比如选择“河南”并提交

提交时的参数如下：

多选可通过设置multiple属性来实现，Ctrl+点击来实现选择多个

<select name="color" multiple>

    <option value="red">红色</option>

    <optionvalue="yellow">黄色</option>

    <optionvalue="green">绿色</option>

    <optionvalue="black">黑色</option>

</select>

传递的参数为：

Select标签size属性定义了下拉列表会出现的选项个数，当数量大于定义个数的时候，会自动出现滚条。

格式化快捷键：Ctrl+A/t+L

可以使用<optgroug>进行分组

<select name="car"
multiple>

    <optgroup label="国产车">

        <option
value="红旗">红旗</option>

        <option
value="BYD">BYD</option>

        <option
value="奇瑞QQ">奇瑞QQ</option>

    </optgroup>

    <optgroup label="德系车">

        <option
value="奔驰">奔驰</option>

        <option
value="宝马">宝马</option>

        <option
value="大众">大众</option>

    </optgroup>

    <optgroup label="日系车"disabled>

        <option
value="丰田">丰田</option>

        <option
value="本田">本田</option>

        <option
value="玛莎拉蒂">玛莎拉蒂</option>

    </optgroup>
</select>

</optgroup>的lable属性定义分组显示的文字，disable设置该分组不能用。

4.13textarea

Textarea标签主要是为了方便用户输入较多的文字信息，rows属性指定编辑区域的行数，cols属性指定编辑区域的列数

学习经历

<textarea cols="20"rows="3"></textarea>-->

 

4.14fieset

当页面文字较多时，为了方便和美观，可以采用<fieldset>来进行分组，页面会比较整齐。

<legend>类似表名，看起来更加直观。

<fieldset>

    <legend style="align-content:center;
color:aquamarine">个人基本信息</legend>

    用户名：<input type="text"
name="username"/>

    <br>

    性别：

    <br>

    <input type="radio"
name="sex"/>男

    <br>

    <input type="radio"
name="sex"/>女
</fieldset>
<br>
<fieldset>

    <legend>学校信息</legend>

    专业：。。。

    <br>

    毕业学校：。。。

    <br>

    专业：。。。。
</fieldset>
<br>
<fieldset>

    <legend>工作岗位</legend>

    期望薪资：。。。。
</fieldset>

4.15隐藏域

<form action="#"
method="get">

    <input type="hidden"
name="stuid"
value="2015010104"
readonly/>

    <br>

    原密码：<input type="password"
name="old"/>

    <br>

    新密码：<input type="password" 
name="new"/>

    <br>

    <input type="submit"
value="修改密码"/>
</form>

当客户需要修改密码时，为了安全起见不能让id显示在前台页面，我们可以把id用input标签设置为隐藏属性，这样也不会阻碍给后台传参。

Table表格：

Caption定义表格的标题

Thead：定义表头部分

<table border="1" cellspacing="0" cellpadding="8" align="center">

border表格线的粗细，cellspacing表格之间的间隙，cellpadding是留白。

Tbody 定义表格主体（数据）部分

Tfoot定义表尾，显示汇总信息

Tr定义一行

Th td 定义一个数据项（单元格），th一般用于表头，有加粗样式，td一般用于表格主体部分，没有加粗样式。

Td的rowspan和colspan分别定义了单元格跨行的行数、跨列的列数