表单,按钮,单行文本框,单选按钮,复选框,多行文本下拉列表这几个概念的基本应用一齐反应在下面的代码中,效果见沙发帖:
[Plain Text] 纯文本查看 复制代码 <html>
<head>
<meta http-equiv="content-type" content="text/html' charset=utf-8">
<title>groad.net</title>
</head>
<body>
<form>
姓 名:<input type="text" name="UserName" SIZE="40"><br><br>
E-mail:<input type="text" name="UserMail" SIZE="40" value="yourmail@mail-server"><br><br>
<input type="radio" name="UserAge" value="Age1">未满18岁
<input type="radio" name="UserAge" value="Age2" checked>18~29
<input type="radio" name="UserAge" value="Age3">30~39
<input type="radio" name="UserAge" value="Age4">40~49
<input type="radio" name="UserAge" value="Age5">50岁以上 <br><br>
您是从哪里知道曲径通幽的?
<input type="checkbox" name="UserFrom[]" value="internet">互联网
<input type="checkbox" name="UserFrom[]" value="searchen">搜索引擎
<input type="checkbox" name="UserFrom[]" value="friend">朋友介绍
<input type="checkbox" name="UserFrom[]" value="newspaper">报刊 <br>
您对小站的建议?<br>
<textarea name="Suggestion" cols="45" rows="4"></textarea><br>
您使用哪家运营商上网:(可多选)
<select name="Userlink" size="4" multiple>
<option value="CTL" elected>中国电信</option>
<option value="CUN">中国联通</option>
<option value="CTT">中国铁通</option>
<option value="CMB">中国移动</option>
</select><br>
<input type="submit" value="提交">
<input type="reset" value="重新输入">
</form>
</body>
</html>
1. <form> ... </form> 标签
这个标签用来插入表单。有许多属性,这里只是使用标签的最简形式,被这个标签包裹其中的内容都属于表单部分。
2. <input> 标签中的按钮
当使用 <input> 标签,且 type 类型为 submit 或 reset 时,分别表示 ”提交“ 和 ”重置“ 两个按钮。当用户点击 "提交" 按钮时,浏览器的默认动作是将用户的输入信息返回 web 服务器;当点击“重置”按钮时,浏览器的默认动作是清除用户的输入信息,使表单恢复到初始状态。
3. <input> 标签中的单行文本框
当使用 <input> 标签且类型为 “text” 时,使用的是单行文本框。在类型为 "text" 时,文本框需要有一个名字 name ,这个名字的值只能用英文表示,且唯一(存在多个单行文本框时,每个文本框的名字不能相同)。此外,还可以用属性 size 来设置文本框的宽度,其 value 属性用来设定文本框内的初始值,如上面 E-Mail里框里的初始值为 yourmail@mail-server 。
4. <input> 标签中的单选按钮
当使用 <input> 标签且类型为 “radio” 时,使用的是单选按钮。多个单选按钮可共用同一个属性 name ,即最终提交给服务器的也只能是其中一个选项值,也就是说用 name 来分组。原则上,在使用单选按钮时,value 是要写上的,这样才能对所做的选择有所区分,如果不写,那么在使用 get 方法时,可以看到一个默认值为 "on" 。
5. <input> 标签中的复选框
当使用 <input> 标签且类型为 “checkbox” 时,我们使用的是复选框。比如当你卸载了某个软件时,往往会弹出一个界面,这些界面里会调查你卸载它的原因,这时就会用上复选框。注意复选框中的属性 name,它被设置为数组,因为数组是可以用来存放多个元素的;另外还有一个属性 checked ,当该属性被设置时,该复选框中的项被默认使用。
6. 多行文本框标签 <textarea>...</textarea>
多行文本框很常见,比如建议意见,自我介绍等录入就需要的是多行文本框,它由 <textarea>...</textarea> 来设定,它需要放在 <form>...</form> 标签之间,默认情况下,多行文本框里面不显示任何数据。该标签的属性也很多,上面例子中只设置了文本框的宽度(rows 属性)和高度(cols 属性)。
7. 下拉列表标签 <select>...</select>
<select>...</select> 标签用来制作下拉列表,它需要搭配 <option> 标签使用。其中,我们可以通过 <option> 中的属性 selected 设置一个预设选择项目,如上面例子中,预设选择了“ 中国电信” 。
在填完表单后,点击“提交”按钮,地址栏会出现如下的提示:
http://192.168.1.104:9888/html/form.html?UserName=beyes&UserMail=yourmail%40mail-server&UserAge=Age2&Suggestion=dasdfasdfasdf&Userlink=CUN
可以看到,form.html 后面接着一个 '?' 符号,该符号后面就是提交给服务器的表单信息。在表单信息中,我们看到每个表单项都用 '&' 符号进行分隔。 |