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

<！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. 使用css3属性，大部分浏览器要识别前缀

    例如以下代码的解析 -ms-transform:rotate(7deg); -moz-transform:rotate(7deg); -webkit-transform:rotate(7deg); - ...

  2. delete语句与reference约束 FK_subplan_job_id冲突问题，导致job无法删除解决办法

    在SQL Server 2008上删除已运行维护计划后,维护计划job没有自动删除掉,手工再删除维护计划job,提示删除失败. 错误现象:delete  语句与 reference 约束"F ...

  3. （一）backbone - API入门

    初探 backbone采用MVC模式,本身提供了模型.控制器和视图从而我们应用程序的骨架便形成. Backbone.js 唯一重度依赖 Underscore.js. 对于 RESTful , hist ...

  4. Iterable 超级接口

    这是一个老祖宗,一代一代往下拨 collection 的方法如下,是一个跟接口方法如下,见API collection  : add():添加一个元素 addAll():添加一组元素 clear(); ...

  5. （原）torch中显示nn.Sequential()网络的详细情况

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6065526.html 本部分多试几次就可以弄得清每一层具体怎么访问了. step1. 网络定义如下: ...

  6. adb安装和卸载apk的方式

    昨天在使用adb卸载程序,结果死活卸载不了.我输入的命令和系统提示如下: D:\testApk>adb uninstall HelloWorld Failure 后来发现原来卸载程序时,只adb ...

  7. 【3】创建一个简单的Laravel例子

    现在我们来创建一个Laravel的例子来帮助理解 1.首先打开app/Http/routes.php文件,在里边写上一条路由: 2.创建一个控制器,有两种方法 ①在app/Http/Controlle ...

  8. 新浪短链接API接口示例

    <?php /** * URL地址长短切换,由sina新浪短链接API生成 * User: chenqt * Date: 2016/8/23 * Time: 18:45 */ class Url ...

  9. php中利用HttpClient判断页面状态

    $url = ''; $info = parse_url($url); $httpClient = new HttpClient($info['host']); $httpClient->get ...

  10. [转载]linux下mysql 自动备份

    ySQL :: Linux 下自动备份数据库的 shell 脚本Linux 服务器上的程序每天都在更新 MySQL 数据库,于是就想起写一个 shell 脚本,结合 crontab,定时备份数据库.其 ...