<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
   <!--
       表单就是从浏览器向服务器传输数据的手段
       表单具备两个要素：
        -Form 表单元素
        -表单控件
    表单主要用于显示、收集和提交信息到服务器
    -->
    <form action="" method="post">
        <!--
           -action  ：表单提交的URL
           -method  ：表单数据的提交方式
           -entype  ： 表单数据进行编码的方式
         -->

         <!--
           表单控件：
           文本框、密码框
         单选框、复选框
          按钮
         隐藏域、文件选择框
         --其他：
            标签、文本域、下拉选框等等
          -->
          <h1>表单</h1>
          <!-- input 元素作 文本框和密码框 -->
          <!-- 常用属性：
             value 属性：对应输入框或者密码框的文本内容
             maxlength: 限制输入的字符数
             readonly:设置文本只读
           -->
         <p>
         <label for="name"> 用户名:</label>
         <input type="text" id="name" name="user" value="<请输入你的用户名>"/>
         </p>
         <!-- label 标签元素，用于给控件设置名称
              for :设置该文本所关联的控件ID，关联后点击标签等于点击控件
          -->
         <p>
          <label for ="pass">密码：</label>
          <input type="password" id="pass"name="pass" maxlength="8">
         </p>
         <!-- input 元素作 单选框和复选框 -->
        <p>
         性别： &nbsp;&nbsp;&nbsp;&nbsp;
        <label for="m">男：</label>
         <input type="radio" name="sex" id="m" value="m">&nbsp;&nbsp;&nbsp;&nbsp;
         <label for="f">女：</label>
         <input type="radio" name="sex" id="f" checked="checked" value="f">
         <!-- 常用属性：
             name 属性：用于实现分组，一组单选框或者复选框的名称必须相同。
             cheched 属性:设置选中的
             value 属性：文本，当页面提交表单时，会把对应的value值发送到服务器
          -->
         </p>

         <p>
             爱好：<br>
             <input type="checkbox" name="hobby" value="1">打篮球 &nbsp;&nbsp;
             <input type="checkbox" name="hobby"value="2">踢足球<br>
             <input type="checkbox"name="hobby"value="3">打乒乓球 &nbsp;&nbsp;
             <input type="checkbox"name="hobby"value="4">滑雪<br>
             <input type="checkbox"name="hobby"value="5">爬山 &nbsp;&nbsp;
             <input type="checkbox"name="hobby"value="6">拳击<br>
         </p>

         <!--input 元素作 按钮
           提交按钮： submit
           --传送表单数据给服务端或者其他程序处理

         重置按钮 ： reset
           --清空表单的内容并把所有表单控件还原成默认状态和默认值

         普通安丘 ： button
           --用于执行客户端脚本
           属性 ： value：按钮的名字
          -->
          <p>
          <input type="submit" value="保存">&nbsp;&nbsp;
          <input type="reset" value="重置">&nbsp;&nbsp;
          <input type="button" value="取消">&nbsp;&nbsp;
          </p>
          <!-- 隐藏域 和文件选框
               隐藏域  hidden  --在表单中包含不希望用户看见的信息
              文件选框  file   --上传文件到服务器
           -->
          <input type="hidden" name="用户性格" value ="sb">
          <input type="file"><br>
          <!--
                文本域
                相当于多行文本框
                <textarea>元素
                主要属性：
                cols :指定文区域的列数
                rows: 指定文本区域的行数.
                readonly: 只读
           -->
         <p>
           文本区域：<br>
          <textarea rows="10" cols="10">
          广州市天河区天河路大厦西厅2407号
          </textarea>
          </p>
          <!-- 下拉选单 -->
          <p>课程：<br>
          <select name="course">
              <option value="1">java</option>
              <option value="2">PHP</option>
              <option value="3">.NET</option>
          </select>
          </p>
    </form>
</body>
</html>

html—表单控件的更多相关文章

  1. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  2. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  3. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  4. 基于CkEditor实现.net在线开发之路（3）常用From表单控件介绍与说明

    上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...

  5. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  6. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  7. HTML5(常用的表单控件)

    常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...

  8. wicket基础应用(2)--wicket表单控件的使用

    该文可以转载,但转载必须注明作者,出处: 作者:lhx1026 出处:http://lhx1026.iteye.com/ 这一章介绍wicket表单控件的简单应用 1.Label控件 这个应该说是最常 ...

  9. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  10. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

随机推荐

  1. 和为S的连续正整数序列（双指针法）

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  2. 042、Java中逻辑运算之短路或运算“||”

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  3. Spring加载Properties配置文件的三种方式

    一.通过 context:property-placeholder 标签实现配置文件加载 1) 用法: 1.在spring.xml配置文件中添加标签 <context:property-plac ...

  4. JuJu团队11月28号工作汇报

    JuJu团队11月28号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达 解决了数据接口的bug 生成generator形式, 并用熟悉Julia处理数据的方法 处理数据步 ...

  5. 使用 mtd-utils 烧写Arm Linux 系统各个部分

    有关博客:<Arm-Linux 移植 mtd-utils 1.x>.<mtd-utils 的 使用> 背景: 作为一项技术储备,可用于增强系统可维护性. 要求: 要求主板以mt ...

  6. duilib之重写BUTTON按钮

    在使用BUTTON过程中,有时候发现一些属性不够用,或要从新绘制BUTTON按钮,那该如何操作?其实很简单,只需要继承CButtonUI类就行. 创建类CMyButtonUI,继承CButtonUI, ...

  7. redis : Can't save in background: fork: Cannot allocate memory

    redis : Can't save in background: fork: Cannot allocate memory JAVA程序报错信息: MISCONF Redis is configur ...

  8. Hive 数据类型 + Hive sql

    Hive 数据类型 + Hive sql 基本类型 整型 int tinyint (byte) smallint(short) bigint(long) 浮点型 float double 布尔 boo ...

  9. jsp页面使用<% 语句%> SQL Server数据库报空指针异常（在控制台可以正常执行）

    一直反感用SQL Server数据库,很影响电脑性能!!数据库作业不得不用 前几天作业一直报空指针异常: 自己检查了所传参数,和数组不为空 数据库查询语句不为空 然后查看SQL服务是否启动  主要是S ...

  10. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记：SSH框架（Struts2+Spring+Hibernate）搭建整合详细步骤

    在实际项目的开发中,为了充分利用各个框架的优点,通常都会把 Spring 与其他框架整合在一起使用. 整合就是将不同的框架放在一个项目中,共同使用它们的技术,发挥它们的优点,并形成互补.一般而言,在进 ...