本篇博客来记录一下表单标签和一个练习题,表单在我们的生活中也是非常常见的了,例如注册一些软件填的个人信息的网页,或者网络上办理一些东西都需要填写信息,而填写信息的界面我们就叫做表单
格式:
<form> <表单元素> </form>
表单中也有很多标签和属性,下面来学习吧
一、input标签
input标签中有一个type属性,type属性的取值不同就决定了input标签的功能和外观。
1.明文输入框
<input type="text">
给输入框设置默认值
<input type="text" value=" ">
2.暗文输入框(输入密码等隐私信息)
<input type="password">
给输入框设置默认值
<input type="password" value=" ">
3.单选框
默认情况下选项不会互斥,就是单选框默认情况下可以多选,想要互斥必须给每一个单选框标签设置一个name属性,并且name属性还必须一致
例如:
性别:
<input type="radio" name="sex">男 <input type="radio" name="sex">女
浏览器打开后显示如图
给输入框设置默认值,只需要给input标签添加一个checked属性
<input type="radio" name="sex" checked=“checked”>女
4、多选框(checkbox)
格式例如;
体育特长: 篮球<input type="checkbox"> 排球<input type="checkbox"> 足球<input type="checkbox"> 游泳<input type="checkbox">
浏览器打开后显示如图
默认值:加checked=“checked”
5、创建按钮
(1)\格式:
<input type=“button” value="按钮 ">
(2)\这样创建的按钮样式可能比较单一,因此我们还有图片按钮
<input type=“image” src=" ">
(3)、重置按钮(用来清空表单中的数据)
<input type=“reset” >
重置按钮默认的按钮标题为(重置),可以通过value属性更改
<input type=“reset” value="取消 ">
(4)、提交按钮(将表单中的数据提交到远程服务器)
<input type=“submit” >
若要将表单中的数据提交到远程服务器,需要满足两个条件
一要告诉表单需要提交到哪一个服务器,可以通过form标签的action属性告诉表单
例:<form action="www.baidu.com">
二要告诉表单,表单中的那些数据需要提交,在数据中加入name属性
(5)、隐藏线
<input type=“hidden” >
6、Label标签(文字和输入框的绑定)
就是说使用了lable标签可以让文字和输入框绑定在一起,点击文字时对应的输入框聚焦
绑定格式
(1)、将文字利用lable标签包裹起来
(2)、给输入框添加一个Id属性
(3)、在lable标签中通过for属性和输入框中的Id标签进行绑定即可
<lable for="account">账号:</lable><input type="text" id="account">
上面是常用的一种方法,下面是一种简单的方法,不过有一定的局限
<lable> 账号:<input type="text"> </lable>
局限就是用第一种方法可以任意的绑定文字与输入框,而这种方法只能绑定对应的文字和输入框
7、datalist标签(了解)
用来给输入框绑定待选项
格式:
(1)、搞一个输入框
(2)、写一个datalist列表
(3)、给datalist列表添加一个Id属性
(4)、给输入框添加一个list属性,将datalist的Id对应的值赋给list属性即可
例如:
请输入你喜欢的水果:<input type="text" list="fruit"> <datalist id="fruit"> <option>苹果</option> <option>香蕉</option> <option>橘子</option> </datalist>
浏览器打开如图:
8、HTML5 input新增标签(了解)
邮箱:<input type="email">
域名:<input type="url">
电话号码:<input type="number">
时间:<input type="date">
颜色:<input type="color">
9、select标签(下拉列表)
<select> <option> </option> <option> </option> </select>
加默认值
<option selected=“selected”> </option>
optgroup标签
例如:
<select>
<optgroup label="信息学院">
<option>计算机科学与技术</option>
<option>网络工程</option>
<option>数学</option>
<option>电子</option>
<option>计开发</option>
</optgroup>
<optgroup label="经管学院">
<option>会计</option>
<option>金融</option>
</optgroup>
</select>
浏览器打开后是这样的
10、textarea标签(文本域)
文本域用来定义一个多行的输入框
格式:例如
自我介绍:<textarea cols="30" rows="30"></textarea>
二、一个简单的学生信息注册页面
刚开始拿到这个作业的时候,我自己还没有学到表单,就傻不拉几的用了表格,关键自己一直不知道错了哈哈哈太搞笑了
下面是我做的浏览器打开之后的界面(看着是不是没有什么问题?其实我写的代码可以说是完全错误,因为当时我自己还没有学习到表单,想当然的用了表格,而且很多标签属性都用错了)
错误代码上一下,(不要看不要看不要看)(我想自己留个记录)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息注册界面</title>
<style type="text/css">
table tr:hover{
background: chartreuse;
}
</style>
</head>
<body bgcolor="#f0f8ff">
<table width="600" align="center">
<caption><h1>学生信息注册页面</h1></caption>
<tr>
<td>姓名</td>
<td>
<input type="text">
</td>
<br/>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio"name="sex">
女<input type="radio"name="sex">
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text"> 按照格式yyy-mm-dd写
</td>
</tr>
<tr>
<td>学校</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>专业</td>
<td>
<select>
<option>计算机科学与技术</option>
<option>网络工程</option>
<option>数学</option>
<option>电子</option>
<option>计开发</option>
<option>其它</option>>
</select>
</td>
</tr>
<tr>
<td>体育特长</td>
<td>
篮球<input type="checkbox">
排球<input type="checkbox">
足球<input type="checkbox">
游泳<input type="checkbox">
</td>
</tr>
<tr>
<td>上传照片</td>
<td>
<input type="text">
<button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">浏览</button>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea cols="20" rows="10">
</textarea>
<button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">确定</button>
<button onclick="window.open('reset')">取消</button>
</td>
</tr>
</table>
</body>
</html>
好的,现在我们先来分析一下这个页面
(1)、首先这是一个表单
(2)、第二行性别会用到一个单选按钮,第六行体育特长会用到一个多选按钮
(3)、第五行专业会用到下拉列表
(4)、一般情况下密码为不可见
(5)、自我介绍会用到文本域
(6)、要用到创建按钮
下面来一下我改正之后的代码及浏览器打开之后的图片(做的也没有很好看,至于样式、对齐方式之类的可以自己改一下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息注册页面</title>
</head>
<body bgcolor="#7fffd4">
<h1 align="center">学生信息注册页面</h1>
<form>
<p>
姓名:<input type="text">
</p>
<p>
性别:<input type="radio" name="sex">男
<input type="radio" name="sex">女
</p>
<p>
出生日期:<input type="date">
</p>
<p>
学校:<input type="text">
</p>
<p>
专业:
<select>
<option>计算机科学与技术</option>
<option>网络工程</option>
<option>数学</option>
<option>电子</option>
<option>计开发</option>
</select>
</p>
<p>
体育特长:
篮球<input type="checkbox">
排球<input type="checkbox">
足球<input type="checkbox">
游泳<input type="checkbox">
</p>
<p>
上传照片:<input type="text">
<button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">浏览...</button>
</p>
<p>
密码:<input type="password">
</p>
<p>
自我介绍:<textarea cols="30" rows="20"></textarea>
</p>
<p>
<button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">提交</button>
<input type="reset" value="取消">
</p>
</form>
</body>
</html>