<!DOCTYPE HTML>

<html>

<head>

    <title>用户登录的表单</title>

</head>

<body>

<!--

form:表单  我们与服务器进行交互的地方

action:表单提交的地址

method:提交的方式

    01.get:会在url中显示用户输入的信息         不安全

    02.post:不会在url中显示用户输入的信息   相对安全

-->

  <form action="login.html" method="post">

    <!--表单元素

      name:相当于一个标记，目的就是 ：服务器获取我们的输入

      text：文本输入框

      password：密码框

      submit：提交按钮

      button：普通按钮，不具有提交表单的功能

    -->

     <p>  用户名：<input  type="text" name="userName"/></p>

      <p> 密码：<input  type="password" name="pwd"/></p>

      <input type="submit" value="登录">

      <input type="button" value="按钮">

      <input type="reset" value="重置">

  </form>

</body>

</html>

需要的login.html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

   <h1>用户登录成功！</h1>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>用户登录的表单</title>

</head>

<body>

  <form action="login.html" method="post">

<!--

value：元素的初始值！  服务器通过name属性值获取value属性值

placeholder:占位符，给用户一个友好的提示

-->

     <p> 用户名：<input  type="text" name="userName" value="请您输入用户名"/></p>

     <p> 用户名：<input  type="text" name="userName" placeholder="请您输入用户名" /></p>

      <input type="submit" value="登录">

  </form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>用户登录的表单</title>

</head>

<body>

  <form action="" method="post">

<!--

size:规定了文本框的长度

maxlength:文本框中输入的最大字符数

-->

     <p> 用户名：<input  type="text" name="userName" size="50" /></p>

     <p> 用户名：<input  type="text" name="userName" maxlength="10" /></p>

      <input type="submit" value="登录">

  </form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>单选按钮</title>

</head>

<body>

  <form action="" method="post">

<!--  单选按钮

 type="radio"

 name：属性值要相同！保证只能选择一个！

 value：必须要设置，如果不设置，后台无法获取我们的选择！

 checked:默认被选中

-->

      <input  type="radio" name="sex" value="男" checked/>男

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

  </form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>复选框</title>

</head>

<body>

<form action="" method="post">

    <!--  复选框

      type="checkbox"'

      name:保证一致，用于后台的获取！

      value：后台获取的数据

      checked:默认被选中

    -->

   <input  type="checkbox" name="love" value="sports">运动

   <input  type="checkbox" name="love" value="talk" checked>聊天

   <input  type="checkbox" name="love" value="play">玩游戏

   <input  type="checkbox" name="love" value="song">唱歌

</form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>列表框</title>

</head>

<body>

<form action="" method="post">

    <!--  列表框

       select size="4"：下拉列表的高度

       option：下拉框中的每一项

       value：用户选中后，后台获取的值

       selected:默认被选中！

    -->

    <select>

         <option value="January">1月份</option>

         <option value="February" selected>2月份</option>

         <option value="March">3月份</option>

         <option value="April">4月份</option>

         <option value="May">5月份</option>

         <option value="June">6月份</option>

         <option value="July">7月份</option>

         <option value="August">8月份</option>

         <option value="September">9月份</option>

         <option value="October">10月份</option>

         <option value="November">11月份</option>

         <option value="December">12月份</option>

    </select>

</form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>表单元素</title>

</head>

<body>

<!--enctype:表单的编码属性

如果表单中有文件上传的功能，必须设置multipart/form-data

-->

<form action="#" method="post" enctype="multipart/form-data">

    <!-- 按钮-->

    <input type="button" value="普通按钮">

    <input type="reset" value="重置按钮">

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

    <!--图片按钮

    <input type="image" src="data:images/1.png">-->

    <!--多行文本域

    cols:列数

    row:行数

    -->

    <textarea  name="textContent" cols="10" rows="10">

        默认的文本值

    </textarea>

    <!--文件域-->

    <input type="file" name="files"><br/>

    <!--邮箱   自动验证email输入是否正确-->

    邮箱: <input type="email" name="email" required><br/>

    <!--网址   自动验证url输入是否正确-->

    网址: <input type="url" name="myUrl"><br/>

    <!--数字

     min:可以输入的最小值

    max:可以输入的最大值

    step:合法的数字间隔

    -->

    数字:<input type="number" name="num" min="0" max="120" step="10"/><br/>

    <!--滑块-->

    <input  type="range"  name="ran" min="0" max="120" step="20"><br/>

    <!--搜索框-->

    <input type="search" name="s">

    <!--日期-->

    <input type="date" min="1990-01-01">

    <input type="date" max="2016-12-09">

</form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>表单元素</title>

</head>

<body>

<form action="#" method="get" >

    <!--readonly:只读属性！不允许修改!-->

  用户名：<input type="text" name="userName" value="admin" readonly>

    <input type="button" value="登录禁用" disabled>

    <!--button:默认的type值是submit-->

    <button type="submit" >登录</button>

    <!--隐藏域  在页面上不会显示  但是 后台还是通过name属性值获取value属性的值-->

    <input type="hidden" name="password" value="haha"><br/>

    <!--label:自动将焦点移动到关联的表单元素上！-->

    <label for="pwds">密码：</label>

    <input type="password" name="pwd" id="pwds"><br/>

   <label>确认密码：<input type="password" name="rePwd"/></label>

    <input type="radio" name="sex" required>男

    <input type="radio" name="sex">女

    <!-- 正则表达式-->

    手机号:<input type="text" name="phone" pattern="^1[34578]\d{9}$"/>

</form>

</body>

</html>

html03表单的更多相关文章

  1. ASP.NET Aries 入门开发教程9：业务表单的开发

    前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...

  2. 探索ASP.NET MVC5系列之~~~3.视图篇（下）---包含常用表单和暴力解猜防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  3. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  4. jQuery学习之路（5）- 简单的表单应用

    ▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. .net erp（办公oa）开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  7. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  8. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  9. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

随机推荐

  1. unity3d相关资源

    http://pan.baidu.com/s/1kTG9DVD   GUI源码

  2. Android用surface直接显示yuv数据（三）

    本文用Java创建UI并联合JNI层操作surface来直接显示yuv数据(yv12),开发环境为Android 4.4,全志A23平台. package com.example.myyuvviewe ...

  3. Linux基础以及简单命令

    1. UNIX是什么 UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序.特点:多用户和多任务 2. GNU项目与自由软件 GPL条款是为保证GNU软件可以自由地使用 ...

  4. Mac下 javac java 进行编译和运行含有包路径及引入jar包的类

    近两天因为刚入职,属于熟悉环境的阶段,研究了下算法(第四版),当不使用IDE工具直接使用终端进行javac 编译带有包的类,然后使用java 会出现如下错误提示: 使用谷歌搜索了很久,终于找到解决的办 ...

  5. Top 10 Uses For A Message Queue

    We’ve been working with, building, and evangelising message queues for the last year, and it’s no se ...

  6. 【Flask】Flask Cookie操作

    ### 什么是cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了解决这个问题,第 ...

  7. UML学习-1 UML 简介

    UML 是什么 Unified Modeling Language(UML)又称统一建模语言或标准建模语言,是始于 1997 年一个 OMG 标准,它是一个支持模型化和软件系统开发的图形化语言,为软件 ...

  8. USACO 简易题解（蒟蒻的题解）

    蒟蒻难得可以去比赛,GDOI也快到了,还是认真刷题(不会告诉你之前都在颓废),KPM 神犇既然都推荐刷USACO, 辣就刷刷. 现在蒟蒻还没刷完,太蒟刷得太慢,so 写了的搞个简易题解(没代码,反正N ...

  9. LeetCode——Diameter of Binary Tree

    LeetCode--Diameter of Binary Tree Question Given a binary tree, you need to compute the length of th ...

  10. 对拷 使用scp命令在两台linux上对拷文件或者文件夹

    以前一直是在服务器上tar打包压缩,下载到本地电脑上,再上传到另外一台服务器上,再解压. 其实使用scp命令就可以直接对拷文件或者文件夹了. scp就是secure copy,是用来进行远程文件拷贝的 ...