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

<！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原理(第一篇)

    Asp.net (第一篇) 当用户在浏览器输入一个URL地址后,浏览器会发送一个请求到服务器.这时候在服务器上第一个负责处理请求的是IIS.然后IIS再根据请求的URL扩展名将请求分发给不同的ISAP ...

  2. 未在本地计算机上注册"Microsoft.ACE.OLEDB.12.0"提供程序

    运行时出现了错误,提示未在本地计算机上注册"Microsoft.ACE.OLEDB.12.0"提供程序. 这个问题的原因是64位PC上安装了Office的32位版本,所以Micro ...

  3. thinkPHP中省市级联下拉列表

    公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...

  4. Destoon标签使用技巧十则

    Destoon标签 1.全局标签 网站名称:{$DT[sitename]}网站地址:{DT_PATH}网站LOGO: {if $MODULE[$moduleid][logo]}{DT_SKIN}ima ...

  5. Modified Kaprekar Numbers

    Link: https://www.hackerrank.com/challenges/kaprekar-numbers from __future__ import print_function d ...

  6. debian系统下安装ssh服务

    它是什么?? SSH 为 Secure Shell 的缩写,简单地说,SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利用 SSH 协议可 ...

  7. gulp编译less简单demo

    写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...

  8. [HDU] 2094 产生冠军(拓扑排序+map)

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=2094 注意每组数据处理前,map要清空. #include<cstdio> #includ ...

  9. [科普]MinGW vs MinGW-W64及其它

    转载:http://tieba.baidu.com/p/3186234212?pid=54372018139&cid=#54372018139 这里也转一下吧. 部分参照备忘录原文: bitb ...

  10. STL List容器

    转载http://www.cnblogs.com/fangyukuan/archive/2010/09/21/1832364.html 各个容器有很多的相似性.先学好一个,其它的就好办了.先从基础开始 ...