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

<！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. Java性能漫谈－数组复制之System.arraycopy

    当我还年幼的时候,我很任性,复制数组也是,写一个for循环,来回倒腾,后来长大了,就发现了System.arraycopy的好处. 为了测试俩者的区别我写了一个简单赋值int[100000]的程序来对 ...

  2. 在mac平台运行debug.exe

    最近准备学习操作系统,想先复习一下汇编语言.因为用的是mac,而看的汇编教材(<汇编语言>王爽)使用到DOS下的debug,在网上搜了一圈发现,mac 也可以模拟运行debug. 先到网上 ...

  3. Spring dbcp连接池简单配置 示例

    一.配置db.properties属性文件 #database connection config connection.username=sa connection.password=sa conn ...

  4. 费马小定理&欧拉定理

    在p是素数的情况下,对任意整数x都有xp≡x(mod p).这个定理被称作费马小定理其中如果x无法被p整除,我们有xp-1≡1(mod p).利用这条性质,在p是素数的情况下,就很容易求出一个数的逆元 ...

  5. Dede修改文章默认标题长度，让标题全显示

    第一步首先你要进入dedecms后台,系统——系统基本参数——其他选项——文档标题最大长度——在这修改为200或更大(其实200应该是足够了). 第二步进入phpmyadmin,点击dede_arch ...

  6. js中constructor的作用

    在学习过程中对js的constructor的作用产生了疑问.下面是学习的资料进行梳理 function Person(area){ this.type = 'person'; this.area = ...

  7. 帝国cms7.0整合百度编辑器ueditor教程

    帝国cms7.0整合百度编辑器ueditor教程开始 1.根据自己使用的帝国cms版本编码下载对应的ueditor版本 下载地址 http://ueditor.baidu.com/website/do ...

  8. 用python随机生成数据，再插入到postgresql中

    用python随机生成学生姓名,三科成绩和班级数据,再插入到postgresql中. 模块用psycopg2 random import random import psycopg2 fname=[' ...

  9. Unicode的解救方案 - Windows程序设计（SDK）002

    Unicode的解救方案 让编程改变世界 Change the world by program 内容节选: 早期的Windows也是使用ASCII字符集,ASCII好处多多,但ASCII的第一个字母 ...

  10. cocos2d-js 入门一 （[isNaN()和isFinite()，字符和Number之间的转化）

    isNaN() : 用于检查其参数是否是非数字值.// 提示:是非数字哦.(not a number)document.write(isNaN(0) )  //返回falsedocument.writ ...