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

<！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. C#图像处理（2）：给图片加白边

    C#图片处理给图片添加白边: /// <summary> /// 在图片上方加入白边 /// </summary> /// <param name="Img&q ...

  2. Merge Sorted Array 合并数组并排序

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  3. C# 如何获取错误所在行数

    两种方法,一种是利用error.StackTrace,另外一种是try-catch找到错误行数,具体如下: 一.error.StackTrace代码 int i = ex.StackTrace.Ind ...

  4. C#窗体嵌套

    1.思路:在一个面板上显示或者隐藏不同窗体 private void button1_Click(object sender, EventArgs e) { chuangti at = new chu ...

  5. redis的特色

    总结一下redis的特点: 1.独特的键值对模型 很多数据库只能处理一种数据结构:     • SQL 数据库 —— 表格     • Memcached —— 键值对数据库,键和值都是字符串     ...

  6. 【Nutch2.2.1基础教程之6】Nutch2.2.1抓取流程

    一.抓取流程概述 1.nutch抓取流程 当使用crawl命令进行抓取任务时,其基本流程步骤如下: (1)InjectorJob 开始第一个迭代 (2)GeneratorJob (3)FetcherJ ...

  7. [转]hibernate主键生成策略

    1.自动增长identity 适用于MySQL.DB2.MS SQL Server,采用数据库生成的主键,用于为long.short.int类型生成唯一标识使用SQL Server 和 MySQL 的 ...

  8. 从类的继承看socketserver源码

    当我们拿到一份python源代码,我们要怎么去看呢? 下面我们以socketserver为例,看下面的一段代码: #!/usr/bin/env python # -*- coding: UTF-8 - ...

  9. Jasper_passValue_return value from the subreport to main report

    create a variable In subreport  say returnValue variable class type --> whatever u want calculati ...

  10. 用php理解指针--写给刚刚学习编程的人

    在刚刚学习编程时,可能for循环什么的还是可以理解,但是当学习到指针的时候,课上估计很多人就睡觉去了. 现在用两端php程序说明指针 先写一个简单的,大家都理解下 <?php class tex ...