我们先来设置一个简单的表单

<！doctype html>
<html>
<head>

           <meta charset="utf-8">

           <title>一个简单的表单</title>

</head>

<body>

          <form>

                    姓：

                    <input type="text" name="lastname">

                    <br/>

                    名：

                    <input type="text" name="firstname"> 
          </form>
</body> 
</html>

form是表单的标签。input是输入的意思。type是类型的意思。text是文本的意思

type=text代表一个文本框，可以输入文字字母等。

框内的属性

name在着表单中是表单内的意思

name=lastname在文本框输入姓

name=firstname在文本框输入名

<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>输出密码试试看</title>

</head>

<body>

           <form>

                     用户：

                     <input type="text" name="user" placeholder="用户名">

                     <br />

                     密码：

                     <input type="password" name="password" placeholder="密码">

           </form>

</body>

</html>

将password设置到类型处，所输入的文本就是隐藏的了。大多数的浏览器中文本区域最多输入20个字符。这里英文type类型不一样所以会导致表单长度不一样。 placeholder后面是显示在空格内的字符。提示用户输入。

<!doctype html>

<html>

<head>

            <meta charset="utf-8>

            <title>选项式表单x</title>

</head>

<body>

           <form>

                      <input type="radio" name="sex" value="male" />male

<br />

                      <input type="radio" name="sex" value="female" />famale

           </form>

</body>

</html>

type=radio类型等于单项选择的意思，name="sex"等于性别的意思。value="选项内容"

<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>多项选择表单</title>

</head>

<body>

           <p>你喜欢什么？</p>

           <form>

                     <input type="checkbox" name="代码"/>

                      我喜欢代码

                     <br/>

                     <input type="checkbox" name="上网"/>

                      我喜欢上网

                     <br/>

                     <input type="checkbox"name="跑步"/>

                      我喜欢跑步

           </form>

</body>

</html>

type="checkbox"这是多项选择表单。

<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>表格的动作属性和确认按钮</title>

</head>

<body>

           <form name="input" action="后端地址" meahod="get">

           用户名：

           <input type="text" name="user"/>

           <input type="submit" value="提交">

           </form>

</body>

</html>

action链接后端的地址。meahod=get从服务器获取数据.

<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>带有预选值的下拉列表</title>

</head>

<body>

<form>

           <select name="汽车">

           <option value="奔驰'>奔驰</option>

           <option value="宝马">宝马</option>

           <option value="奥迪"selected="selected" >奥迪</option>

           <option value="法拉利">法拉利</option>

</form>

</body>

</html>

select是选择的意思，制作下拉列表表单。option是列表中选项的意思。selected是列表预选的意思。在打开下拉列表选项时它会优先选择。

<!doctype html>

<html>

<head>

           <meta charset="utf-8">

           <title>关于表单的文本域以及按钮</title>

</head>

<body>

          <form>

                    <textarea rows="10" cols="30">

                                     在这个区域可以输入的文本将没有限制

                    </textarea>

                    <input type="button" value="我是按钮快来点我">

          </form>

</body>

</html>

　其中：textarea=文本  rows等于文本域长度cols等于文本域的宽度。

type是按钮的意思，value=按钮内容。

这张图最上面的手机号注册背景class="zbar"

HTML 表单与输出的更多相关文章

  1. PHP / JavaScript / jQuery 表单验证与处理总结： 第①部分 PHP 表单验证与处理

    PHP VERSION = 5.3.10 一.关于 $_REQUEST PHP 文档关于 $_REQUEST 的说明: 说明 默认情况下包含了 $_GET,$_POST 和 $_COOKIE 的数组. ...

  2. Django表单介绍

    HTML 表单 在HTML中,表单是<form>...</form> 之间元素的集合,它们允许访问者输入文本.选择选项.操作对象和控制等等,然后将信息发送回服务器. 某些表单的 ...

  3. django 表单验证和字段验证

    表单验证和字段验证 表单验证发生在数据验证之后.如果你需要自定义这个过程,有几个不同的地方可以修改,每个地方的目的不一样.表单处理过程中要运行三种类别的验证方法.它们通常在你调用表单的is_valid ...

  4. YII用户注冊表单的实现熟悉前台各个表单元素操作方式

    模还是必须定义两个基本方法.还有部分label标签映射为汉字,假设进行表单验证,还要定义一些验证规则: <? php /* * 用户模型 * */ class user extends CAct ...

  5. 转载：Django之form表单

    转载: 一.使用form类创建一个表单 先定义好一个RegForm类: forms.py from django import forms # 导入forms类 class NameForm(form ...

  6. 💡我们的表单解决方案 el-form-renderer

    前言 本文将介绍我们的表单解决方案 @femessage/el-form-renderer,展示我们在 Vue 技术栈下,我们是如何处理以下问题的: 表单项动态显示或隐藏 表单数据联动 表单输入/输出 ...

  7. APS.NET MVC + EF (07)---表单和HTML辅助方法

    在ASP.NET MVC中,可以借助HtmlHelper 对象来输出页面内容,提高开发效率.下面,我们将介绍一些常用的辅助方法. 7.1 HTML辅助方法 BeginForm 该辅助方法主要用来产生& ...

  8. 【flask】使用Flask-WTF处理表单

     我的理解是Flask-WTF与html文件的关系就如同SQLAlchemy与数据库之间的关系. 通过python Form类,生成html代码,并在html模板文件中通过{{}}变量的方式引用这些生 ...

  9. 用户输出表单处理php

    php中的表单输入处理,我用两个文件,在linux输出: touch php_post1.html php_post1.php php_post1.html代码如下: <!doctype htm ...

随机推荐

  1. asp.net 实现 tts

    之前用WinForm实现tts已经成功,就调用了下系统的类库.但我把相同的代码搬到asp.net上时却碰到了许多问题,查了好多网站.试过了很多方法,到现在算是做出了一部分吧. 之前调用微软的TTS是用 ...

  2. mysql中常用的语句整理

    mysql中常用的语句: 1:创建带自增长的主键的表 DROP TABLE IF EXISTS user_login ; CREATE TABLE user_login (   user_id INT ...

  3. int.Tryparse() 、int.parse()、Convert.To32() 的区别

    int.Tryparse()  Int32.TryParse(source, result)则无论如何都不抛出异常,只会返回true或false来说明解析是否成功,如果解析失败,调用方将会得到0值. ...

  4. Bootstrap 字形图标（Glyphicons）

    http://w3c.3306.biz/bootstrap/eg/bootstrap--glyphicons-list.html

  5. poj2378 树形DP

    C - 树形dp Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65536KB     64bit ...

  6. 关于(x&y)+((x^y)>>1)的探究

    今天在程序员面试宝典上看到 int f(int x int y ) { return (x&y)+((x^y)>>1) } f(729,271) 结果为500 从式子中可以看出分为 ...

  7. 一则 Mysql 建表语句

    DROP TABLE IF EXISTS `nuvue`; CREATE TABLE `nuvue`( `id` ) UNSIGNED NOT NULL AUTO_INCREMENT, `status ...

  8. NAS4Free 安装配置（三）基本配置

    基本配置 在浏览器中输入地址,进入管理界面(我的是http://192.168.0.10) 登录界面 初始用户名:admin,初始密码:nas4free 首页 进入基本配置 这里可以选择语言,有中文, ...

  9. 1170: 非常男女(XCOJ 前缀和)

    1170: 非常男女 时间限制: 1 Sec  内存限制: 128 MB提交: 22  解决: 9 标签提交统计讨论版 题目描述 Matrix67已经当过多次“媒人”了.他因此获得了许多经验.例如,距 ...

  10. 使用grid++report打印选中行

    接上一篇<hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结>对grid++report做进一步开发 先写一下实现流程: 1.默认为全部载入 ...