曲径通幽论坛

标题: 表单[按钮,单行文本框,单选按钮,复选框,多行文本下拉列表 [打印本页]

作者: beyes 时间: 2011-8-30 10:05
标题: 表单[按钮,单行文本框,单选按钮,复选框,多行文本下拉列表
表单,按钮,单行文本框,单选按钮,复选框,多行文本下拉列表这几个概念的基本应用一齐反应在下面的代码中，效果见沙发帖：

[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 后面接着一个 '?' 符号，该符号后面就是提交给服务器的表单信息。在表单信息中，我们看到每个表单项都用 '&' 符号进行分隔。

作者: beyes 时间: 2011-8-30 10:06
标题: 上贴实例效果
<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>

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)

Powered by Discuz! X3.2