腾讯云618限量抢购
  1. DIV+CSS教程

XHTML 表单元素 input 标签

最后更新:2010-10-02 01:09阅读:11998

type 属性

<input /> 标签是一个非成对标签。其 type 属性的不同取值而显示为不同的样式:

type 属性 说明
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 多选框
hideen 隐藏元素
file 文件选择
submit 提交按钮
reset 重置按钮

单行文本(Text Fields)及密码(Password Fields)

单行文本输入框的例子:

<p>昵称:<input type="text" name="nickname" /></p>
<p>密码:<input type=" password " name="password" /></p>

浏览器显示如下:

昵称:

密码:

单选按钮(Radio Buttons)

单元按钮只允许从选择项中选择一项:

<p><input type="radio" name="sex" value="male" checked="checked" />男</p>
<p><input type="radio" name="sex" value="female" />女</p>

定义属性 checked="checked" ,表示默认选中。

浏览器显示如下:

复选框

复选框允许选择多个选项:

<p><input type="checkbox" name="hiddenMsg" value="1" />(隐藏评论)</p>
<p><input type="checkbox" name="hiddenName" value="1" />(隐藏姓名)</p>

浏览器显示如下:

(隐藏评论)

(隐藏姓名)

在该例子中,复选框的name属性是不一样的。这样我们在获取到的表单值时,如果都选中,则获取到了不同的值( hiddenMsg=1 和hiddenName=1 )。

复选框数组形式

在很多情况下,如一排相似的复选列表,要构造不同的复选名字是很困难且也是无意义的(如同时删除多条留言),这时候我们会把复选列表构造成一列数组,而根据数组的具体值来操作,仍以上面的例子为例:

<p><input type="checkbox" name="other[]" value="Msg" />(隐藏评论)</p>
<p><input type="checkbox" name="other[]" value="Name" />(隐藏姓名)</p>

而我们在获取表单页面,得到的将是一个数组:

[other] => Array ( [0] => Msg [1] => Name )

在逻辑上,我们可以根据数组的值来做对应的操作。关于 PHP 操作数组,请参看《PHP 数组》。

隐藏元素

有时候表单提交的值是不需要显示出来的,这时候就要用到 hidden 属性,通常这类数据是作为辅助数据随表单提交:

<input type="hidden" name="articleid" value="23" />

文件选择

文件选择用于选择本地电脑里的一个文件,如一副图片。

<input name="photo" type="file" enctype="multipart/form-data" />

提交与重置按钮

点击提交按钮,表单内容会被提交到 antion="" 定义的文件内处理。

<input type="submit" name="Submit" value=" 提交 " />
<input type="reset" name="Reset" value=" 重置 " />

浏览器显示如下:


本章节内容共分 5 部分:
  1. 1. XHTML 表单 form 标签
  2. 2. XHTML 表单元素 input 标签
  3. 3. XHTML Get与Post
  4. 4. XHTML 下拉列表|菜单 select标签
  5. 5. XHTML 多行文本输入 textarea标签
腾讯云618限量抢购