复习HTML+CSS(6)

时间:2020-12-02 19:47:17

复习HTML+CSS(6)

表格和表单的嵌套顺序

复习HTML+CSS(6)

单行文本域

  • 语法格式:<input type=”text” 属性=”值”>
  • 常用属性

l  Name:文本框的名字。命名规则:可以包含字母、数字、下划线,只能以字母开头。

l  Type:表单元素的类型。

l  Value:文本框中默认的值。

l  Size:文本框的长度,以“字符”为单位。

l  maxLength:最多可以输入多少个字符,超出的就输不进去了。

l  readonly:只读属性。可以选中,但不能修改。如:readongly=”readonly”

l  disabled:禁用属性。不能选中,不能修改。如:disabled=”disabled”

复习HTML+CSS(6)

单行密码框

  • 语法格式:<input type=”password” 属性=值“” />
  • 常用属性

l  Name:密码框的名字。命名规则:可以包含字母、数字、下划线,只能以字母开头。

l  Type:表单元素的类型。

l  Value:文本框中默认的值。

l  Size:文本框的长度,以“字符”为单位。

l  maxLength:最多可以输入多少个字符,超出的就输不进去了。

l  readonly:只读属性。可以选中,但不能修改。如:readongly=”readonly”

l  disabled:禁用属性。不能选中,不能修改。如:disabled=”disabled”

复习HTML+CSS(6)

单选按钮

  • 语法格式:<input type=”radio” 属性=“值” />
  • 常用属性

l  Name:元素的名称

l  Value:元素的值,该value中的数据将发往服务器。

l  Checked:默认选择哪一项。如:check=”check”

复习HTML+CSS(6)

注意:一组单选按钮,只能选择一个,但name的值必须一致。如:name=”sex”

单选按钮用户自己不能输入内容,用户只能选择,因此必须为它指定默认值value。

复选框

  • 语法格式:<input type=”checkbox” 属性=“值” />
  • 常用属性:name:元素的名称。
  • Checked:默认选中。如:checked=”checked”

复习HTML+CSS(6)

注意:复选框也是一组选项,因为name的值必须一致,在PHP中,使用数组来获取多个同名的name的值。

复选框可以同时选多个,也可以一个都不选。

下拉列表

<select name=”名称”>

<option value=”北京市”>北京市</option>

<option value=”天津市”>天津市</option>

<option value=”重庆市”>重庆市</option>

</select>

<select>标记的属性,只有一个name属性

<option>标记的属性有两个:value属性、selected属性

Selected:默认选中。如:selected=”selected”

复习HTML+CSS(6)

文本区域

  • 语法格式:<textarea name=”名称” cols=”宽度” rows=”高度”></textarea>
  • 常用属性:

u  Name:元素名称

u  Cols:宽度,是指多少个字符宽。

u  Rows:高度,是指几行高,

  • 提示:<textarea>和<textarea>之间是默认文本。

各种按钮

  • 提交按钮:<input type="submit" value="提交按钮" />
  • 重置按钮:<input type="reset" value="重新填写" />
  • 图片按钮: <input type="image" src="data:images/3.png" />   //功能就是提交表单,与submit按钮功能一样
  • 普通按钮:<input type="button" onclick="javascript:window.close()" value="关闭窗口" />

u  普通按钮本身是不具备任何功能的,一般要与JS程序配合使用,实现相应的功能

隐藏域

功能:隐藏域就是一个看不见的框。传递一些值,而这个值又不想让别人看见。

用处:主要用于PHP后台程序,如:修改某一条新闻内容时,需要传递一个新闻的id号。

语法格式:<input type=”hidden” name=”名称” value=”默认值” />

复习HTML+CSS(6)

上传文件域

  • 语法格式:<input type=”file” 属性=“属性”>
  • 常用属性

l  Name:表单元素的名称

l  Value:表单元素的值,这个值其实就是上传的文件名。Value属性是只读属性,这个value的内容只能来自手动选择上传的文件,而不能用户自己指定一个路径。为了安全起见,value是只读的。

<td><input type="file" name="uploadFile" /></td>

复习HTML+CSS(6)

复习HTML+CSS(6)

<caption>表格标题

语法格式:<caption></caption>

提示:<caption>标记是table的子标记。<caption>放在<table>开始标记之后。

复习HTML+CSS(6)

复习HTML+CSS(6)