HTML表单_输入元素

  • 大多数情况被用到的表单标签是输入标签
  • 输入类型是由类型属性(type)定义的。

表单中的单选按钮可以设置以下几个属性:value、name、checked

  • value:提交数据到服务器的值(后台程序PHP使用)
  • name:为控件命名,以备后台程序 ASP、PHP 使用
  • checked:当设置 checked时,该选项被默认选中
  • selected:同上,但是好像是列表专用的

常用的表单元素类型如下:

文本域(Test Fields)

文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。 文本域为只有一行的文本框,效果如下:

<form>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</form>

account_ :

password:

  • 可以通过将input type的值改为password来讲文本域改为密码字段专用(即输入不可见 **或···)

文本框

<textarea rows="4" cols="30">
我是一个文本框。rows为行数,cols为列数
</textarea>

我是一个文本框。rows为行数,cols为列数

按钮

<form action="">
<input type="button" value="This is a button">这个按钮下什么都没有
</form>

这个按钮下什么都没有

单选按钮和复选框(Radio Buttons ,ChackBoxes)

<input type="radio">

<input type="checkbox">

<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Male
Female

I have a bike
I have a car

  • 同一个name属性的单选框为一组,同一组的按钮才能起到单选的作用

select选择列表

<form action="">
<select name="cars">
<option value="null">请选择性别</option>
<optgroup label="正常">
<option value="1">男</option>
<option value="2">女</option>
<optgroup label="特殊">
<option value="3" selected>不详</option>
</select>
</form>

请选择性别


不详

  • <optgroup label="分组名称"> 列表选项分组(标签)(不可做为选项之一,只做分组之用)
  • 无需多余解释,代码即可
  • 可在option标签中 添加selected元素即为预选项,如没有,则默认为第一个option

提交按钮(Submit Button)

<input type="submit">定义了提交按钮.

顾名思义,提取表单中的数据到某处

  • 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

重置按钮

<input type="reset">定义重置按钮

  • 点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。
<input type="reset" name="button" id="button" value="重置">

表单

在表单周围添加边框

<form>
<fieldset>
<legend>边框上的文字:</legend>
account_ : <input type="text" name="firstname"><br>
password: <input type="password" name="lastname">
</fieldset>
</form>

边框上的文字:
account_ :

password:

<label>标签

表单内的 标签没有什么特殊的效果 ,只是在用鼠标点击标签时会触发旁边的

控件(比如单选框)但需要label的for属性等于inputid属性

for属性可把 label 绑定到另外一个元素。请把for属性的值设置为相关元素的id属性的值。

  • label肯定不止是这么用的,但是目前···

表单_HTML的更多相关文章

  1. HTML学习二_HTML常用的行级标签,常用实体字符及表单标签

    HTML常用的行级标签(行内元素)不独占一行### 有语义的行内元素 #### HTML链接 a标签 ```angular2html<a href="链接地址">链接文 ...

  2. Django组件之Form表单

    一.Django中的Form表单介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入 ...

  3. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  4. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

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

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

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

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

  7. jQuery学习之路(8)- 表单验证插件-Validation

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

  8. jQuery学习之路(5)- 简单的表单应用

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

  9. 12、Struts2表单重复提交

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

随机推荐

  1. APC的本质

     Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html APC的本质 一.对于线程关闭问题的启发 线程,本身占据CPU, ...

  2. C# loop executed one by one wait the former completed

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. requeests模块请求常用参数的写法整理

    主要是针对写法 一.requests.get requests.get是调用了requests.request('get', url, params=params, **kwargs) 1.url 协 ...

  4. 【重学Git】整理提交记录

    有时候我们在本分支做了一个很小的更改提交,其他分支想直接拿到这个更改提交,有没有一种不像merge或rebase这么正式的做法呢?也就是说:我仅仅是想获取其中一个小改变而已.cherry-pick就是 ...

  5. Servlet小结(面试)

    1.doGet()和doPost()区别/get和post请求方法区别: (1)在form表单中:method  = “get/post”相对应doGet和doPost方法. (2)在http协议中: ...

  6. Android8.1 源码修改之通过黑名单屏蔽系统短信功能和来电功能

    前言 之前写过一篇Android6.0 的屏蔽系统短信功能和来电功能,具体看这里 同样的最近有个新需求,需要将8.1 设备的来电功能和短信功能都屏蔽掉,特殊产品就是特殊定制,那就开始吧. 屏蔽短信功能 ...

  7. Saltstack_使用指南15_多master

    1. 主机规划 实现2个master,当这两个master运行时都可以向minion发送命令. salt 版本 [root@salt100 ~]# salt --version salt (Oxyge ...

  8. sql客户端工具Navicat_Premiun12中文破解版

    Navicat Premium 是一套数据库开发工具,让你从单一应用程序中同时连接 MySQL.MariaDB.MongoDB.SQL Server.Oracle.PostgreSQL 和 SQLit ...

  9. 05. Go 语言函数

    Go 语言函数 函数是组织好的.可重复使用的.用来实现单一或相关联功能的代码段,其可以提高应用的模块性和代码的重复利用率. Go 语言支持普通函数.匿名函数和闭包,从设计上对函数进行了优化和改进,让函 ...

  10. LG2145 「JSOI2007」祖码 区间DP

    问题描述 LG2145 题解 把颜色相同的一段看做一个点. 然后类似于合唱队区间DP即可. 但是这题好像出过一些情况,导致我包括题解区所有人需要特判最后一个点. \(\mathrm{Code}\) # ...