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. MySql-8.0.16-winx64 安装

    参考文章: https://www.cnblogs.com/lxlin/p/9635350.html https://www.cnblogs.com/xc1234/p/9050149.html MyS ...

  2. Python中编写类的各种技巧和方法

    简介 有关 Python 内编写类的各种技巧和方法(构建和初始化.重载操作符.类描述.属性访问控制.自定义序列.反射机制.可调用对象.上下文管理.构建描述符对象.Pickling). 你可以把它当作一 ...

  3. ES6新语法(一)

    1.常量         ES5没有定义声明常量的方式,ES6标准中引入了新的关键字const来定义常量.         常量必须给初始值: 常量不能在同一作用域内重新定义或赋值:  <scr ...

  4. Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限

    场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  5. [Spring]:java.lang.NoSuchMethodError: 'java.lang.String javax.annotation.Resource.lookup()'

    错误信息 11月 05, 2019 9:32:15 下午 org.springframework.test.context.TestContextManager prepareTestInstance ...

  6. git找回丢失的代码

    多人开发时找回丢失的代码 1.先保证所有分支的代码都已经提交并拉取到最新状态. 2.最重要的是需要找到最近一条自己代码还存在的记录,然后复制到最近的更早一条的提交记录的id,比如e36e9e76da1 ...

  7. iTerm2 使用代理

    0x00 事件 因为 brew 安装极慢,所以需要 iTerm2 设置代理解决速度问题. 0x01 解决 代理软件开启本地 Http 端口: iTerm 设置代理: $ vim ~/.zshrc # ...

  8. 安装HomeBrew 失败的解决方案(Error: Fetching /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core failed!)

    在安装HomeBrew(或者安装成功 执行相关指令)时遇到错误提示: Error: Failure while executing: git clone https://github.com/Home ...

  9. request请求参数与http请求过程

    request请求参数

  10. day(66)作业

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...