<!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. Parcel

    1.IPC解决方案 而非 序列化机制 Container for a message (data and object references) that can be sent through an ...

  2. 静默安装oracle 11g及参数配置优化详解

    一.安装前准备工作1.修改主机名#vi /etc/hosts   //并添加内网IP地址对应的hostname,如下127.0.0.1           localhost::1           ...

  3. iOS数据存储到本地的几种方法

    A,归档解档(多针对于模型或者数组,利用MJExtension) 1,先在model里的.m文件写上MJCodingImplementation 2,再进行模型归档: #define APP_DOCU ...

  4. Redis以服务的形式启动

    ★期望目标:把RedisWatcher安装为windows服务. 安装完成后, 到安装目录下修改watcher.conf. 注意,任何路径都不可包含空格,中文,特殊字符,且全部使用绝对路径 ※配置文件 ...

  5. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  6. sublime Text emmet插件使用手册

    转自:http://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工 ...

  7. hadoop11----socket

    package cn.itcast.bigdata.socket; import java.io.BufferedReader; import java.io.InputStream; import ...

  8. 使用Linq to XML 修改app.config

    使用其他的方法修改app.config无效.而且修改的是*.vshost.exe.Config,程序运行时正常,关闭之后就还是原来的值. Configuration configuration = C ...

  9. 【Head First Servlets and JSP】笔记

    1.谈到服务器的时候,可能是指物理主机(硬件),也可能是指Web服务应用(软件). 2.谈到客户的时候,通常指人类用户,或者是浏览器应用,或者两者都包括,浏览器应用做些什么?发送请求.解释HTML和呈 ...

  10. 【笔记】Maven使用入门

    参考<maven实战> 1.编写POM 2.编写主代码 3.编写测试代码 4.打包和运行 具体如下: 1.编写POM. <!-- XML头,指定了该xml文档的版本和编辑方式 --& ...