1.Form表单

表单是一个包含表单元素的区域,主要作用就是向服务器提交数据。

 

2.文本表单

文本表单简单的包括有文本框密码框文本域

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
<table><!-- 建立两行两列的表格,方便对齐 -->
	<tr>
		<td>用户名: </td>
		<td><input type="text" id="userName" name="userName"/> </td>
	</tr>
	<tr>
		<td>密码:</td>
		<td><input type="password" id="passWord" name="passWord"/></td>
	</tr>
	<tr>
		<td colspan="2" ><textarea id="textarea" name="textarea" rows="10" cols="30"></textarea></td>
	</tr>
</table>
</form>
</body>
</html>

运行结果:

HTML(六)——html表单_html 

自己可以填写相应的信息!

 

3.单选框

单选框是radio;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
性别:
<input type="radio" name="sex">男
<!-- checked属性是默认选中 -->
<input type="radio" name="sex" checked="checked">女
</form>
</body>
</html>

运行结果:

HTML(六)——html表单_html_02 

默认选中女;

 

4.复选框

复选框是checkbox;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
性别:
<input type="radio" name="sex"/>男
<!-- checked属性是默认选中 -->
<input type="radio" name="sex" checked="checked">女<br/>
兴趣:
<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>跳舞
<input type="checkbox" name="hobby" checked="checked"/>下棋
</form>
</body>
</html>

运行结果:

HTML(六)——html表单_HTML表单_03 

可以多选!

 

5.下拉框

下拉框用select;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
性别:
<input type="radio" name="sex"/>男
<!-- checked属性是默认选中 -->
<input type="radio" name="sex" checked="checked">女<br/>
兴趣:
<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>跳舞
<input type="checkbox" name="hobby" checked="checked"/>下棋<br/>
年级:
<select id="grade" name="grade">
	<option value="1">大一</option>
	<option value="2">大二</option>
	<option value="3">大三</option>
</select>
</form>
</body>
</html>

运行结果:

HTML(六)——html表单_web前端_04 

 

6.按钮

按钮分为提交按钮submit普通按钮button

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
<table><!-- 建立两行两列的表格,方便对齐 -->
	<tr>
		<td>用户名: </td>
		<td><input type="text" id="userName" name="userName"/> </td>
	</tr>
	<tr>
		<td>密码:</td>
		<td><input type="password" id="passWord" name="passWord"/></td>
	</tr>
	<tr>
		<!-- 这种登录是提交数据到后台 -->
		<td><input type="submit" value="登录"></td>
		<!-- 普通按钮 -->
		<td><input type="button" value="提交"></td>
	</tr>
</table>
</form>
</body>
</html>

运行结果:

HTML(六)——html表单_web前端_05 

 

7.文件上传

文件上传用file

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="file" id="f" name="f"/>
</body>
</html>

运行结果:

HTML(六)——html表单_html_06 

点击选择文件就可以打开本地文件了;

注:这里不同的浏览器解析的结果是不同的!