HTML+CSS详解

HTML+CSS

  1. 网站用户注册页面显示
    1. 案例介绍

所有HTML标签中,表单标签是最重要的。在实际开发中,最经典的案例就是用户注册,几乎覆盖了表单标签的所有元素。效果如下:

HTML+CSS详解_第1张图片

    1. 案例相关标签
      1. 表单标签:

描述:表单标签,在html页面创建一个表单,表单标签在浏览器上没有任何显示。如果数据需要提交到服务器,则负责搜集数据的标签必须存放在表单标签中。

属性:

1)action属性:请求路径,确定表单提交到服务器的地址(路径)。

2)method属性:请求方式。常用取值:GET、POST。

GET:默认值

特点:提交的数据追加在请求路径上。例如:/1.html?username=jack&password=1234,数据格式为key/value对,追加是使用?连接,之后每一对数据之间使用&连接。

因为请求路径长度有限,所以GET方式提交的请求数据有限定。

因为在地址栏中显示数据,所以数据安全性不高。

POST:

特点:提交的数据不在请求路径上追加(即不显示在地址栏中),安全性更好,提交的数据大小无限定。

      1. 输入域标签:

标签一般用于获取用户输入信息,type属性值不同,则标签展现形式和搜集的信息也不同,是在页面中常用的标签。

1.type属性:

text:单行文本框。用户可在其中输入文本。默认宽度为20个字符;

password:密码框。在该控件中输入内容不明文显示,以黑圆显示。

radio:单选按钮。表示一组互斥选项按钮中的一个。当一个按钮被选中时,该组中之前选中的按钮变为非选中状态。

submit:提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性,否则将“提交”两个字提交到服务器。

因为不同项目注册需要的字段不同,需要完成的案例中没有覆盖所有的表单元素,以下标签的使用也需要掌握。

checkbox:复选框。用法与radio基本一致,在一组复选框中可以选任意多个选项。

file:文件上传组件,提供“浏览”按钮,可以选择所需要上传的文件。

hidden:隐藏域。数据会发送给服务器,页面不进行显示。

reset:重置按钮。将表单恢复到初始状态。

image:图形提交按钮,通过src给按钮设置图片。

button:普通按钮。通常结合Javascript实现动作效果。

2.name属性:元素名。如果需要将表单数据提交到服务器,则必须提供name属性值,服务器通过该属性值获取提交的数据。

3.value属性:设置input标签的默认值。submit和reset按钮的value为设置按钮显示文字。

4.size:元素的大小

5.checked:设置单选按钮或者复选框被选中

6.readonly:设置元素只读,不能输入

7.disabled:是否可用。加该属性后,元素不可用

8.maxlength:允许输入的最大长度

9. placeholder:输入框的提示

      1. 下拉列表标签: