码迷,mamicode.com
首页 > Web开发 > 详细

html5学习之路_004

时间:2015-08-30 23:03:14      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

HTML表单

  1. 表单用于获取不同类型的用户输入
  2. 常用表单标签

技术分享

 

下面为一个简单的表单:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        用户名:
        <input type="text">
        密码:
        <input type="password">
  

  <form> </body> </html>

运行结果如下图“

技术分享

常用的表单:

  • 复选框
  • 单选按钮
  • 下拉列表
  • 文本域
  • 创建按钮

复选框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        你喜欢的水果有?
        <p></p>
        复选框
        <br/>
        苹果<input type="checkbox">
        西红柿<input type="checkbox">
        香蕉<input type="checkbox">
  <form> </body> </html>

复选框可以选择多个选项,类型为checkbox,运行结果如下:

技术分享

单选框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        请选择您的性别:
        男<input type="radio" name="sex"><input type="radio" name="sex">
  <form>
</body>
</html>

单选框类型为radio,标记name为同一个组,只能选一个选项,如果name值不同,则不能单选,运行结果如下:

技术分享下拉列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        下拉列表
        <br/>
        请选择网站:
        <select>
            <option>www.jikexueyuan.com</option>
      
<option>www.google.com</option>       
       <
option>www.hven.org</option> </select>
  

<form>
</body> </html>

运行结果如下图:

技术分享

文本域

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <textarea cols="=30" rows="30">请在此填写个人信息</textarea>
</body>
</html>

运行结果如下图:

技术分享

创建按钮

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        创建按钮
        <br/>
        <input type="button" value="按钮">
        <input type="submit" value="确定">
    </form>
</body>
</html>

类型为button,给予文字value,运行结果如下:

技术分享

 

 技术分享

 

本站文章为 宝宝巴士 SD.Team 原创,转载务必在明显处注明:(作者官方网站: 宝宝巴士 

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4771792.html

html5学习之路_004

标签:

原文地址:http://www.cnblogs.com/superdo/p/4771792.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!