HTML之表单

表单:

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>
表单标签:
标签描述
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签,一般为输入标题
<fieldset>定义了一组相关的表单元素,并使用外框包含起来
<legend>定义了 <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist>New指定一个预先定义的输入控件选项列表
<keygen>New定义了表单的密钥对生成器字段
<output>New定义一个计算结果

输入元素

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

文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意:文本域的缺省宽度是20个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

注意:密码字段字符不会明文显示,而是以星号或圆点替代。

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮(Submit Button)

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

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

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

简单的下拉列表

<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>

预选下拉列表

<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>

文本域

<body>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
</body>

带有复选框的表单:

<body><form action="demo-form.php" method="get"><input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br><input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br><input type="submit" value="提交">
</form></body>

带有单选按钮的表单:

<body>
<form action="demo-form.php" method="get"><input type="radio" name="sex" value="Male"> Male<br><input type="radio" name="sex" value="Female" checked="checked"> Female<br><input type="submit" value="提交">
</form>
</body>

从表单发送电子邮件:

<body><h3>发送邮件到 someone@example.com:</h3><form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form></body>

重置按钮

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

<input type="reset" name="button" id="button" value="重置">

点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。

<body><form action="demo-form.php">Email: <input type="text" name="email"><br>Pin: <input type="text" name="pin" maxlength="4"><br><input type="reset" value="重置"><input type="submit" value="提交">
</form><p>点击重置按钮重新设置表单。</p></body>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366338.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将AspectJ与NetBeans平台开发集成

您是否正在使用NetBeans平台开发项目&#xff1f; 您愿意使用AspectJ来使用AOP吗&#xff1f; 您不知道如何将AspectJ编译器集成到NetBeans的内部版本中&#xff1f; 如果您的回答是“是”&#xff0c;则此帖子适合您。 我决定写这篇技术文章&#xff0c;是因为我在寻找该解决…

Linux CentOS 6.5 使用自带jdk修改环境变量

来源:https://www.cnblogs.com/zhenxiqia/p/9049290.html Linux CentOS 6.5 使用自带jdk修改环境变量 首先声明&#xff0c;默认jdk指我们安装完CentOS后系统自带jdk&#xff0c;自己下载安装的jdk只需要下载&#xff0c;解压即可&#xff0c;之后步骤与此文一致 1.查看我们默认…

第二阶段冲刺10

基本的代码已经编写完成&#xff0c;游戏的功能已经完善&#xff0c;基本上已经是一个合格的软件了&#xff0c;这次为期10天的冲刺很充实&#xff0c;我们切实的完善了软件&#xff0c;学会了很多&#xff0c;也可以更好的融入团队中了。团结就是力量&#xff0c;十天前我们还…

java如何找重复数字_Java如何找出数组中重复的数字

题目描述&#xff1a;找出数组中重复的数字&#xff0c;具体内容如下在一个长度为n的数组里的所有数字都在 0~n-1的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字是重复的&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。例如&…

页面中添加锚点的几种方式

本文档创建时间:2018-11-7 15:52:28 方法一,使用a标签添加 通过设置a标签的href属性,跳转到页面中指定id标签的位置a标签的href属性值前要增加#来作为标识,表示是在当前页面的内部跳转 简单的案例: 1 <html>2 <head></head>3 <body>4 <!--设置锚点…

休眠事实:有利于双向集vs列表

Hibernate是一个很棒的ORM工具&#xff0c;它极大地简化了开发&#xff0c;但是如果您想正确地使用它&#xff0c;则有很多陷阱。 在大中型项目中&#xff0c;具有双向父子关联非常常见&#xff0c;这使我们能够浏览给定关系的两端。 在控制关联的持久/合并部分时&#xff0c…

ue正则

1 删除含某些内容的行,例:含有PTTAddress 使用替换功能&#xff0c;勾选正则表达式(Regular Expressions)&#xff0c;查找为%*PTTAddress*^p&#xff0c;替换为空 2.替换大写字母为_大写字母 替换功能&#xff0c;查找为 ^([A-Z]^)&#xff0c;替换为 _^1转载于:https://www.c…

20 存储过程

一、存储过程的定义 存储过程是存储在数据库目录中的一坨的声明性SQL语句。 Java&#xff0c;Python&#xff0c;PHP等应用程序可以调用存储过程。 MySQL是最受欢迎的开源RDBMS&#xff0c;被社区和企业广泛使用。 然而&#xff0c;在它发布的第一个十年期间&#xff0c;它不支…

微信小程序下拉框

微信小程序组件里没有下拉框&#xff0c;正好要用到&#xff0c;记下来以后参考 wxml代码 <view classtop><view classtop-text> 选择接收班级</view><!-- 下拉框 --><view classtop-selected bindtapbindShowMsg><text>{{grade_name}}&l…

int最大值java_Java 中一个int型数组的求最大值最小值 | 学步园

小友今日看单元测试&#xff0c;发现的一个测试用例的代码。而测试的是某个类的最大值&#xff0c;最小值方法。在此把测试类发上来。保留此地&#xff0c;如有人对此有兴趣&#xff0c;看以看下。闲话少说&#xff1a;public class MaxMinTool {public static int getMax(int[…

使用Maven实施自定义JSF 2.0组件

前一段时间&#xff0c;我编写了自己的定制JSF组件。 但是在那个时候&#xff0c;JSF 1.0仍然是最新的&#xff0c;并且该项目没有使用maven作为构建系统。 因此&#xff0c;我一直想用maven编写一个自定义JSF2组件。 因此&#xff0c;让我们开始&#xff1a; 首先&#xff0c…

python2.7.5-虚拟环境搭建

virtualenv可以搭建虚拟且独立的python运行环境, 使得单个项目的运行环境与其它项目独立起来. virtualenv本质上是个python包, 使用pip安装: pip install virtualenv 在新建工作目录下创建虚拟环境: ~$virtualenv TestEnv 默认情况下, 虚拟环境中不包括系统的site-packages, 若…

CSS 高度(css height)

DIV CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX&#xff0c;em等常用使用PX&#xff08;像素&#xff09;为html单位。 height高度目录height高度语法高度用法html原始高度设置css高度hei…

fst java_java快速序列化库FST

FST fast-serialization 是重新实现的 Java 快速对象序列化的开发包。序列化速度更快(2-10倍)、体积更小&#xff0c;而且兼容 JDK 原生的序列化。要求 JDK 1.7 支持。Maven&#xff1a;12 de.ruedigermoeller3 fst4 1.365示例代码&#xff1a;01// ! reuse this Object, it ca…

HOW-TO:带有Spring MVC的Tomcat中的自定义错误页面

默认的Tomcat错误页面看起来很可怕。 此外&#xff0c;它们可能会公开有价值的信息&#xff0c;包括服务器版本和异常堆栈跟踪。 Servlet规范提供了一种通过web.xml配置异常行为的方法。 可以配置对特定Java异常的响应&#xff0c;也可以配置对选定的Http响应代码的响应。 err…

第三代酷睿i3处理器_轻薄本CPU谁更强?英特尔21款低功耗处理器大排行!

点击上电脑爱好者关注我们对智能手机而言&#xff0c;其搭载的SoC是衡量性能强弱的唯一准绳&#xff0c;因为一颗SoC芯片内就集成了CPU(处理器)、GPU(显卡&#xff0c;包括集成的核显和独显)、ISP(影像处理器)和Modem(调制解调器)等模块&#xff0c;只要掌握了SoC的强弱关系&am…

**优化--后端**: 计数缓存counter_cache; rack-mini-profiler(2300) ; bullet(5000✨):侦测N+1query...

rack-mini-profiler 这个 gem,可以永远显示网页的加载时间。&#xff08;2300✨&#xff09;开发环境和产品环境都可以用。&#xff08;生成非常详细的报告&#xff09; development环境,直接使用gem rack-mini-profilerproduction环境&#xff0c;1. gem rack-mini-profiler,…

python学习日记(匿名函数)

匿名函数 简介 匿名函数&#xff1a;为了解决那些功能很简单的需求而设计的一句话函数。 python 使用 lambda 来创建匿名函数。 所谓匿名&#xff0c;意即不再使用 def 语句这样标准的形式定义一个函数。 1 lambda 只是一个表达式&#xff0c;函数体比 def 简单很多。 2 lambda…

列表相关元素及其属性

HTML5保留了如下几个列表相关元素&#xff1a;无序列表<ul>、有序列表<ol>、自定义列表<dl> 1、<ul>&#xff1a;定义无序列表&#xff0c;可以指定id、style、class等属性&#xff0c;还可以指定onclick等事件属性。 2、<ol>&#xff1a;定义有…

唯一的hashCodes不足以避免冲突

有一个常见的误解&#xff0c;即如果您具有唯一的hashCode&#xff08;&#xff09;&#xff0c;则不会发生冲突。 虽然唯一或几乎唯一的hashCodes很好&#xff0c;但这还不是故事的结局。 问题在于HashMap的大小不是无限的&#xff08;或大小至少为2 ^ 32&#xff09;&#x…