补充:
<table width = “60%”>
%表示以 浏览器页面的宽度作为基础计算table的宽度,因为table标签外面就是body标签。
这个依据父类标签的宽度 来计算该标签的宽度。一般用%设置宽高,只需要在 table标签中设置 width = “50%”。
重点总结:
设置样式属性的两种方式
- 直接在标签(默认属性)里面写 eg :
<table width=”10px”>
- 写在style=“样式”,style 里面 ,
eg :<table style=”background-color: red” >
注意: 第一种方式 属性与值之间 是用 “=”连接的
第二种方式 属性与值之间是用 “:” 连接的
如果第一种方式没有实现样式,可能的原因是该属性不是该标签的默认属性。
解决方法:将该属性移动到style里面试一试(记得注意连接符)
如果第二种方式的某个样式属性没有效果,解决方式::使用第一种方式试一试。
补充: 之后学的CSS是第三个 方式 用来实现样式
表单
是一个容器,用来存储客户端(浏览器)用户填写的信息的容器,通过提交按钮将表单容器里面的信息提交到服务器存储起来,以后可以调用。
<form id="register1" name="register" action="/login" method="get/post">
</form>
<form id="register2" name="register" action="" method="get/post">
</form>
id:指的是表单的id(唯一),js通过表单id操作表单
如身份证号
501107 19990909 0832(X)
name:指的是表单的名字(不唯一),同上
action:指的是处理表单或者接收表单信息的url
method:指的是表单提交的方法,默认get(不安全)post(安全)
<input>
标签(表单里面的控件)
<input type=””>
标签用来定义的控件
表单中可以包含很多控件,其中,用<input>
标签定义的控件有单行文本框、密码框、提交按钮、重置按钮、普通按钮、单选按钮、复选框以及上传文件按钮等。这些控件是表单的核心控件,在表单设计中被频繁地使用。
(1)单行文本框
单行文本框指的是表单中可以输入一行文本的输入框,通过设置<input>
标签的type属性为text来指定。其格式如下:
<input type=“text” name=“…” value=“…” size=“…” maxlength=“…” onchange=“…” onselect=“…” onfocus=“…”/>
其中:
name指的是单行文本框的名称;
value指的是单行文本框的默认的初始值;
size指的是单行文本框的显示宽度;
maxlength指的是单行文本框允许用户输入的最大的字符数;
onchange指的是当文本框内文本发行改变时调用的脚本语句或函数;
onselect指的是当文本框内的文本被选中时调用的脚本语句或函数;
onfocus指的是当文本框获得焦点时调用的脚本语句或函数;
onclick
(2)密码框
密码框通过指定<input>
标签的type属性值为password来实现。在密码框中输入字符时,显示的都是*或者实心圆点,密码框的用法和单行文本框的用法基本相同,其格式如下:
<input type=“password” name=“…” value=“…” size=“…” maxlength=“…” onchange=“…” onselect=“…” onfocus=“…”/>
(3)提交按钮
提交按钮通过指定<input>
标签的type属性值为submit来实现。单击了提交按钮后,提交按钮所在的表单的内容会被提交到表单标签中action属性所指的处理程序。提交按钮的使用格式如下:
<input type=“submit” value=“…”/>
其中,value指的是提交按钮上显示的提示文字,一般为“Submit”或者“提交”。
(4)重置按钮
重置按钮通过指定<input>
标签的type属性值为reset`来实现。当单击重置按钮时,重置按钮所在的表单中的所有控件的内容将会被清除,回到控件的默认的初始值,可以重新在控件中输入数据。重置按钮的使用格式如下:
<input type=“reset” value=“…”/>
其中,value指的是重置按钮上显示的提示文字,一般为“Reset”或者“重置”。
(5)普通按钮
除了以上提交按钮和重置按钮之外,还可以使用普通按钮。通过设置<input>
标签的type属性值为button来实现。在表单中使用普通按钮,必须使用onclick调用处理脚本或脚本函数,使用格式如下:
<input type=“button” name=“…” value=“…” onclick=“…” onfocus=“…”/>
其中:
name指的是普通按钮的名字;
value指的是普通按钮上的提示文字;
onclick指的是当单击普通按钮时执行的脚本语句或函数;
onfocus指的是当普通按钮获得焦点时执行的脚本语句或函数;
(6)单选按钮
单选按钮通过指定<input>
标签的type属性值为radio实现,其格式如下:
<input type=“radio” name=“…” value=“…” onclick=“…” onfocus=“…” checked />
其中:
name指的是单选按钮的名称,多个单选按钮属于同一个选项组,必须具有相同的name值;
value指的是单选按钮的值;
checked属性项可选,如果单选按钮的默认状态为被选中,则将checked写在其属性列内;如果不将checked写在其属性列内,则单选按钮的默认状态为未选中;
onclick指的是当单击单选按钮时执行的脚本语句或脚本函数;
onfocus指的是当单选按钮获得焦点时执行的脚本语句或脚本函数;
(7)复选按钮
复选按钮通过指定<input>
标签的type属性值为checkbox来实现。其使用格式如下:
<input type=“checkbox” name=“…” value=“…” onclick=“…” onfocus=“…” checked/>
复选按钮默认的选中状态也通过checked指定,多个复选按钮是否处于同一个选项组也通过name属性指定。其属性可参照单选按钮的属性说明。
(8)隐藏域
表单中的隐藏域在浏览器中是不可见的,因此用户不能借助隐藏域进行交互操作。一般通过隐藏域来传递一些为开发者服务的信息,例如动态方法的调用、Session会话跟踪等。隐藏域通过指定<input>
标签的type属性值为hidden来实现,其格式如下:
(9)上传文件域
上传文件域通过指定<input>
标签的type属性值为file来实现。它包括一个文本框和一个按钮。其格式如下:
<input type=“file” name=“…” value=“…”/>
其中:
name指的是上传文件域的名称;
value指的是上传文件域中的按钮的提示文字,一般为“选择文件”或“浏览……”。
(10)日期选择框
<!-- 日期选择框-->
生日:
<input type="date" id="birthday" name="birthday">
(11)文本域
<textarea rows="5" cols="20">文本域
(12)下拉菜单
下拉列表使用一对标签来实现,其格式如下:
<select name=“…” >
<option value=“…” selected=“selected”>选项1提示信息</option>
<option value=”…”>选项2提示信息</option>
</select>
总结:
1.表单当中 <form> <input>
有 id 、name 这两个共同属性
2. <input>
当中通过改变 type的值来改变控件类型,type里面有 10中类型
text、 password 、 submit 、 reset、 button、 radio 、 checkbox、hidden、file、date