前端学习笔记一:HTML(5)简单制作表单(以登陆页面为例)

继续第五篇。

第七个示例,管它叫登陆界面。
代码如下:


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录title>
	head>
	<body>
		<form action="https://www.baidu.com">
			<table border="1px" cellspacing="0px" align="center">
				<thead> thead>
				<tbody>
					<col width="80px"/>
					<col width="200px" />
					<tr height="40px" align="center">
						<td colspan="2">用户登录td>
					tr>
					<tr height="40px">
						<td align="right">用户名:td>
						<td>
							<input  type="text" name="username"/>
						td>
					tr>
					<tr height="40px">
						<td align="right">密码:td>
						<td>
							<input type="password"  name="password"/>
						td>
					tr>
					<tr height="40px" align="center">
						<td colspan="2">
							<input type="submit" value="登录" />
							<input type="reset" value="重置" />
						td>
					tr>
				tbody>
				<tfoot> tfoot>
			table>
		form>
	body>
html>

运行结果,先展示一下登陆页面:
前端学习笔记一:HTML(5)简单制作表单(以登陆页面为例)_第1张图片
可以在代码段里看到,当想制作一个登录或者任意形式的表单的时候,最好还是利用table标签作框架。利用行列标签的合并属性制作表头,输入提示和输入框和按钮,以及利用其它属性来设计样式。

这次示例的新标签主要就是输入标签,大部分情况下,当你想在HTML网页上输入日志,用户名和密码等文本信息,以及制作相应的提交按钮的时候就需要用到标签。
这个标签最常用的属性有姓名(name)、类型(type)和赋值(value),前两者是输入框的常用属性,后两者是按钮的常用属性。

一个个来。类型**“type”**好理解,就是定义这个输入框或按钮里的内容是什么。
列举一些常用的类型好了

type 输入类型
text 文本输入框
password 密码输入框
radio 单选框
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
file 文件选择框

每个类型的对应的样子就不演示了,在网上冲浪这么多年了总得都见过的(

姓名**“name”,一般用在输入框**上。在网页内向服务器上传账号密码信息的时候需要告知系统哪一个输入框内对应输入的是哪一项信息,这个对应的信息就存储在name内。

赋值**“value”,一般用在按钮**, 显示按钮的内容,即点击这个按钮的功能是什么。如登录,重置,搜索等。

还是懒得再单独搞示例了,再对照着示例看一遍好了((

你可能感兴趣的:(学习笔记)