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=" 重置 " />
浏览器显示如下: