目录
- 1.表单
- 1.1 表单的属性
- 1.2 改变表单内元素类型
- 1.3 例子:用户注册
- 2.列表
- 2.1 无序列表
- 2.2 有序列表
- 2.3 定义列表
1.表单
<form>
元素定义 HTML 表单。表单能够包含 input
元素,比如文本字段、复选框、单选框、提交按钮等等。
1.1 表单的属性
属性 | 值 | 功能 |
action | URL | 规定当提交表单时向何处发送表单数据。 |
method | get post | 规定用于发送 form-data 的 HTTP 方法。 |
target | _blank _self _parent _top framename post | 规定在何处打开 action URL。 |
1.2 改变表单内元素类型
我们可以通过改变<input>
元素的type属性的值,来改变表单内元素类型。
值 | 描述 |
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
date | 定义一个可选择的日期选择列表 |
email | 定义一个邮箱地址 |
1.3 例子:用户注册
现在,我们还需要一点补充知识。
1.当使用radio
类型的input
元素时,我们应该给同一组的radio
以相同的name
,以区分radio
的组(checked
属性用于设置默认选中的选项)。
2.在<form>
标签中使用<select>
标签,可以创建选择列表。可以通过<option>
标签为选择列表添加选项。
代码如下:
<select>
<option selected>--请选择--</option>
<option>你是谁?</option>
<option>你爸是谁?</option>
<option>你妈是谁?</option>
</select>
运行结果,如图:
但这还不够,有时我们还需要在一个选择列表中制造一种多级的效果。这时,我们就需要创建<optgroup>
,给<opiton>
分组。
代码如下:
地址:<select>
<option selected>--请选择--</option>
<optgroup label="吉林省">
<option value="">长春市</option>
</optgroup>
<optgroup label="黑龙江省">
<option>大庆市</option>
</optgroup>
<optgroup label="辽宁省">
<option>沈阳市</option>
</optgroup>
<optgroup label="安徽省">
<option>芜湖市</option>
</optgroup>
</select>
运行结果,如图:
现在,我们已经可以做一点东西了,让我们用刚才学到的东西来写个注册页面,代码如下:
<form action="" method="post" style="text-align: center;">
<h2>用户注册</h2>
账号:<input type="text"><br>
密码:<input type="password"><br>
性别:<input type="radio" name="gender" checked/>男
<input type="radio" name="gender"/>女<br>
年龄:<input type="text"><br>
身份证:<input type="text"><br>
密码问题:<select>
<option selected>--请选择--</option>
<option>你是谁?</option>
<option>你爸是谁?</option>
<option>你妈是谁?</option>
</select><br />
密码答案:<input type="text"><br>
email地址:<input type="text"><br>
爱好:<input type="checkbox"/>抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />烫头<br>
头像:<input type="file"><br>
个人简介:<input type="text"><br>
<input type="submit" value="提交"/><input type="reset" value="重置"/>
</form>
运行结果,如图:
不错,不错,现在看起来,我们能做点东西了,但是现在的页面还很不整齐,所以我们还要做点修改。我们可以使用表格的方式,把页面变整齐。
代码如下:
<form action="" method="post">
<table border="1" align="center">
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td><label for="account">账号:</label></td>
<td><input type="text" id="account"></td>
</tr>
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" id="password" ></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td><input type="radio" name="gender" checked>男
<input type="radio" name="gender"/>女</td>
</tr>
<tr>
<td><label for="age">年龄:</label></td>
<td><input type="text" id="age"></td>
</tr>
<tr>
<td><label for="IDcard">身份证:</label></td>
<td><input type="text" id="IDcard"></td>
</tr>
<tr>
<td><label>密码问题:</label></td>
<td><select>
<option selected>--请选择--</option>
<option>你是谁?</option>
<option>你爸是谁?</option>
<option>你妈是谁?</option>
</select></td>
</tr>
<tr>
<td><label for="password_answer">密码答案:</label></td>
<td><input type="text" id="password_answer">
</td>
</tr>
<tr>
<td><label for="email">email地址:</label></td>
<td><input type="email" id="email"></td>
</tr>
<tr>
<td><label>爱好:</label></td>
<td><input type="checkbox"/>抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />烫头
</td>
</tr>
<tr>
<td><label for="profile">头像:</label></td>
<td><input type="file" id="profile"> </td>
</tr>
<tr>
<td><label for="intro">个人简介:</label></td>
<td><input type="text" id="intro"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
从代码可以看出<input>
可以作单标签使用。
这里因为提交和重置会贴在一起,所以需要使用转义字符 
来输出空格。
运行结果,如图:
2.列表
2.1 无序列表
我们可以使用<ul>
标签(unordered list)创建无序列表,用<li>
标签为其添加项,通过type
属性改变标识的形状。
type的值
disc |
square |
circle |
举例代码如下:
<ul type="disc">
<li>java</li>
<li>.net</li>
<li>C++</li>
</ul>
效果如图:
2.2 有序列表
我们可以使用<ol>
标签创建有序列表,用<li>
标签为其添加项,通过type
属性改变标识的形状。type
属性,例如数字,大写字母,小写字母。
举例代码如下:
<ol type="A">
<li>java</li>
<li>.net</li>
<li>C++</li>
</ol>
效果如图:
2.3 定义列表
我们可以使用<dl>
标签创建定义列表(definition list),用<dt>
标签为其添加组,用<dd>
标签为其添加项,通过type
属性改变标识的形状。
举例代码如下:
<dl>
<dt>吉林省</dt>
<dd>长春市</dd>
<dd>白城市</dd>
<dt>安徽省</dt>
<dd>芜湖市</dd>
<dd>合肥市</dd>
</dl>
效果如图: