请选择 进入手机版 | 继续访问电脑版

菏泽合众云课堂-菏泽最大的IT技能学习平台

快捷导航

HTML 表单和输入

[复制链接]
laozhang 发表于 2015-8-11 11:33:00 | 显示全部楼层 |阅读模式 |          
HTML 表单用于搜集不同类型的用户输入。
实例

文本域 (Text field)
  1. <html>

  2. <body>

  3. <form>
  4. 名:
  5. <input type="text" name="firstname">
  6. <br />
  7. 姓:
  8. <input type="text" name="lastname">
  9. </form>

  10. </body>
  11. </html>
复制代码运行
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。


密码域
  1. <html>

  2. <body>

  3. <form>
  4. 用户:
  5. <input type="text" name="user">
  6. <br />
  7. 密码:
  8. <input type="password" name="password">
  9. </form>
  10. <p>
  11. 请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
  12. </p>
  13. </body>
  14. </html>
复制代码运行
本例演示如何创建 HTML 的密码域。
可以在本页底端找到更多实例。

表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。
  1. <form>
  2. ...
  3.   input 元素
  4. ...
  5. </form>
复制代码运行

输入
多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
文本域(Text Fields)
当用户要在表单中键入字母、数字等内容时,就会用到文本域。
  1. <form>
  2. First name:
  3. <input type="text" name="firstname" />
  4. <br />
  5. Last name:
  6. <input type="text" name="lastname" />
  7. </form>
复制代码运行
浏览器显示如下: 1.jpg
注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。
单选按钮(Radio Buttons)
当用户从若干给定的的选择中选取其一时,就会用到单选框。
  1. <form>
  2. <input type="radio" name="sex" value="male" /> Male
  3. <br />
  4. <input type="radio" name="sex" value="female" /> Female
  5. </form>
复制代码运行
浏览器显示如下:
2.jpg
注意,只能从中选取其一。
复选框(Checkboxes)
当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。
  1. <form>
  2. <input type="checkbox" name="bike" />
  3. I have a bike
  4. <br />
  5. <input type="checkbox" name="car" />
  6. I have a car
  7. </form>
复制代码运行
浏览器显示如下:
3.jpg

表单的动作属性(Action)和确认按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

浏览器显示如下:

4.jpg

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。


更多实例


复选框
  1. <html>

  2. <body>

  3. <form>
  4. 我喜欢自行车:
  5. <input type="checkbox" name="Bike">
  6. <br />
  7. 我喜欢汽车:
  8. <input type="checkbox" name="Car">
  9. </form>

  10. </body>
  11. </html>
复制代码运行
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。


单选按钮
  1. <html>

  2. <body>

  3. <form>
  4. 男性:
  5. <input type="radio" checked="checked" name="Sex" value="male" />
  6. <br />
  7. 女性:
  8. <input type="radio" name="Sex" value="female" />
  9. </form>

  10. <p>当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态。</p>

  11. </body>
  12. </html>
复制代码运行
本例演示如何在 HTML 中创建单选按钮。


简单的下拉列表
  1. <html>

  2. <body>

  3. <form>
  4. <select name="cars">
  5. <option value="volvo">Volvo</option>
  6. <option value="saab">Saab</option>
  7. <option value="fiat">Fiat</option>
  8. <option value="audi">Audi</option>
  9. </select>
  10. </form>

  11. </body>
  12. </html>
复制代码运行
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。


另一个下拉列表

  1. <body>

  2. <form>
  3. <select name="cars">
  4. <option value="volvo">Volvo</option>
  5. <option value="saab">Saab</option>
  6. <option value="fiat" selected="selected">Fiat</option>
  7. <option value="audi">Audi</option>
  8. </select>
  9. </form>

  10. </body>
  11. </html>
复制代码运行
本例演示如何创建一个简单的带有预选值的下拉列表。(编者注:预选值指预先指定的首选项。)


文本域(Textarea)
  1. <html>
  2. <body>

  3. <p>
  4. This example cannot be edited
  5. because our editor uses a textarea
  6. for input,
  7. and your browser does not allow
  8. a textarea inside a textarea.
  9. </p>

  10. <textarea rows="10" cols="30">
  11. The cat was playing in the garden.
复制代码运行
本例演示如何创建文本域(多行文本输入控件)。用户可在文本域中写入文本。可写入字符的字数不受限制。


创建按钮
  1. <html>
  2. <body>

  3. <p>
  4. This example cannot be edited
  5. because our editor uses a textarea
  6. for input,
  7. and your browser does not allow
  8. a textarea inside a textarea.
  9. </p>

  10. <textarea rows="10" cols="30">
  11. The cat was playing in the garden.
复制代码运行
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。


Fieldset around data
  1. <!DOCTYPE HTML>
  2. <html>

  3. <body>

  4. <form>
  5.   <fieldset>
  6.     <legend>健康信息</legend>
  7.     身高:<input type="text" />
  8.     体重:<input type="text" />
  9.   </fieldset>
  10. </form>

  11. <p>如果表单周围没有边框,说明您的浏览器太老了。</p>

  12. </body>
  13. </html>
复制代码运行
本例演示如何在数据周围绘制一个带标题的框。

表单实例


带有输入框和确认按钮的表单
  1. <html>
  2. <body>

  3. <form action="/example/html/form_action.asp" method="get">
  4.   <p>First name: <input type="text" name="fname" /></p>
  5.   <p>Last name: <input type="text" name="lname" /></p>
  6.   <input type="submit" value="Submit" />
  7. </form>

  8. <p>请单击确认按钮,输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

  9. </body>
  10. </html>
复制代码运行
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。


带有复选框的表单
  1. <html>

  2. <body>

  3. <form name="input" action="/html/html_form_action.asp" method="get">
  4. I have a bike:
  5. <input type="checkbox" name="vehicle" value="Bike" checked="checked" />
  6. <br />
  7. I have a car:
  8. <input type="checkbox" name="vehicle" value="Car" />
  9. <br />
  10. I have an airplane:
  11. <input type="checkbox" name="vehicle" value="Airplane" />
  12. <br /><br />
  13. <input type="submit" value="Submit" />
  14. </form>

  15. <p>如果您点击 "Submit" 按钮,您将把输入传送到名为 html_form_action.asp 的新页面。</p>

  16. </body>
  17. </html>
复制代码运行
此表单包含两个复选框和一个确认按钮。


带有单选按钮的表单
  1. <html>

  2. <body>

  3. <form name="input" action="/html/html_form_action.asp" method="get">
  4. Male:
  5. <input type="radio" name="Sex" value="Male" checked="checked">
  6. <br />
  7. Female:
  8. <input type="radio" name="Sex" value="Female">
  9. <br />
  10. <input type ="submit" value ="Submit">
  11. </form>

  12. <p>如果您点击 "Submit" 按钮,您将把输入传送到名为 html_form_action.asp 的新页面。</p>

  13. </body>
  14. </html>
复制代码运行
此表单包含两个单选框和一个确认按钮。


从表单发送电子邮件
  1. <html>

  2. <body>
  3. <form action="MAILTO:896048934<span id="kM0.2878194085787982">@qq.com</span>" method="post" enctype="text/plain">

  4. <h3>这个表单会把电子邮件发送到 菏泽合众云建站。</h3>
  5. 姓名:<br />
  6. <input type="text" name="name" value="yourname" size="20">
  7. <br />
  8. 电邮:<br />
  9. <input type="text" name="mail" value="yourmail" size="20">
  10. <br />
  11. 内容:<br />
  12. <input type="text" name="comment" value="yourcomment" size="40">
  13. <br /><br />
  14. <input type="submit" value="发送">
  15. <input type="reset" value="重置">

  16. </form>
  17. </body>
  18. </html>
复制代码运行

此例演示如何从表单发送电子邮件。
表单标签
标签描述
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义一个控制的标签
<fieldset>定义域
<legend>定义域的标题
<select>定义一个选择列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个按钮
<isindex>已废弃。由 <input> 代替。
提问 返回列表
关闭

小云老师推荐 上一条 /2 下一条

菏泽合众云建站|菏泽学编程|菏泽学设计|菏泽Ps培训|菏泽学建站|小黑屋| 菏泽合众云课堂

Copyright © 2015-2018 菏泽合众云课堂 鲁ICP备14026574号

 

快速回复 返回顶部 返回列表