HTML表单总结

最新推荐文章于 2022-10-06 20:27:27 发布
最新推荐文章于 2022-10-06 20:27:27 发布
阅读量919 收藏 2
点赞数
分类专栏： 原创教程 文章标签： Web前端 html html5 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bcbobo21cn/article/details/45788879
版权

一 HTML 表单标签

标签
描述
 
<form>
定义供用户输入的表单
 
<input>
定义输入域
 
<textarea>
定义文本域 (一个多行的输入控件)

<label>
定义了 <input> 元素的标签，一般为输入标题
 
<fieldset>
定义了一组相关的表单元素，并使用外框包含起来
 
<legend>
定义了 <fieldset> 元素的标题

<select>
定义了下拉选项列表
 
<optgroup>
定义选项组
 
<option>
定义下拉列表中的选项
 
<button>
定义一个点击按钮
 
<datalist>    --html5
指定一个预先定义的输入控件选项列表

<keygen>New    --html5
定义了表单的密钥对生成器字段
 
<output>New    --html5
定义一个计算结果

二 简单例子
1 创建文本域

<body>
<form action="">

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>
</body>


 

2 创建密码字段

<body>
<form action="">

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>
</body>



三 表单


在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（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>

 

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传

送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

 

四 实例
1 带边框的表单

<form action="">

<fieldset>

<legend>Personal information:</legend>

Name: <input type="text" size="30"><br>

E-mail: <input type="text" size="30"><br>

Date of birth: <input type="text" size="10">

</fieldset>

</form>



2 带有输入框和确认按钮的表单

<form action="demo-form.php">

First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>

<input type="submit" value="Submit">

</form>



3 带有复选框的表单

<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="Submit">

</form>



4 带有单选按钮的表单

<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="Submit">

</form>


 

5 从表单发送电子邮件

<body>

<h3>Send e-mail to 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="Send">

<input type="reset" value="Reset">

</form>


</body>


 

6 简单下拉列表

<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>


 

7 文本域

<!DOCTYPE html>

<html>

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


 

8 预选下拉列表

<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>


 

9 创建按钮

<form action="">

<input type="button" value="Hello world!">

</form>


 

    代码都直接可用，拿去花吧；

bcbobo21cn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML详述表单校验总结
m0_46383618的博客
07-20 177
一、文本框 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="name" /> <script> document.getElementById("name").focus();//设置焦点
HTML表单校验总结
bravery__的博客
07-18 950
一、文本框 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="name" /> <script> document.getElementById("name").focus();//获取id为name的焦点
HTML——表单知识点总结
TKY666的博客
02-25 2200
表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮。
HTML表单（来自MDN的总结）
weixin_34037977的博客
08-12 1018
表单介绍 HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以拦截它自己并使用它。 HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的...
HTML常用表单总结
weixin_44309299的博客
02-28 1225
表单的概念：表单是用来采集用户的输入数据，然后将数据提交给服务器 一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮； 表单基本框架 <form action="" method=""> <input type="" name="" id="" value="" /> &l
html表单实验总结,HTML表单总结
weixin_39548832的博客
06-09 1976
一 HTML 表单标签标签描述定义供用户输入的表单定义输入域定义文本域 (一个多行的输入控件)定义了 元素的标签，一般为输入标题定义了一组相关的表单元素，并使用外框包含起来定义了 元素的标题定义了下拉选项列表定义选项组定义下拉列表中的选项定义一个点击按钮 --html5指定一个预先定义的输入控件选项列表New --html5定义了表单的密钥对生成器字段New --html5定...
html表单
最新发布
zhu1243961271的博客
10-06 195
html表单
2021-02-25
MatchaAha的博客
02-25 971
day_32_html表格,表单 1.表格标签 表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。 、创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ...</table> 在上面的语法中包含三对HTML标签，分别为 table、tr、t...
html表单实验总结,html表单知识的相关总结
weixin_34307029的博客
06-09 2769
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。1. ht...
html表单实验结论,web前端开发技术实验报告-实验五
weixin_32304839的博客
06-09 4834
1、长 春 大 学 20 15 2016学年第 二 学期Web前端开发技术 课程实 验 报 告学 院： 计算机科学技术专 业： 软件工程 班 级： 软件14402 学 号： 姓 名： 王 悦 任课教师： 车 娜 实验五 HTML表单一、实验目的1.理解表单的构成，可以快速创建表单。2.掌握表单相关标记，能够创建具有相应功能的表单控件。3.掌握表单样式的控制，能够美化表单界面。二、内容及要求使用表单...
HTML的表单的总结
yibashou的博客
07-18 1732
1、常用额类的表单 &lt;input&gt;    表单的输入控件 &lt;textarea&gt;  定义多行的行文的本框。 &lt;select&gt;   定义一个下拉表 简单的格式 &lt;from action="url地址"  method=“提交方式” name=“表的的名称””&gt; 各种表单空控件 &lt;/from&gt; 2、action的表单的作用 主...
5.CSS3-- 选择器--属性选择器
weixin_44754351的博客
07-24 118
一.属性选择器 先回顾css2的属性选择器： 属性选择器： 下面的例子是把包含标题（title）的所有元素变为蓝色： <h1 title="Hello world">Hello world</h1> <a title="runoob.com" href="//www.runoob.com/">runoob.com</a> <style> [title] { color:blue; } </style> 属性和值选
html表单总结
WYL12344321的博客
12-15 410
表单专题               登录页面             用户名：   密    码：         单选框：RadioButton    复选框：CheckBox     这个段落应该被隐藏。               表单元素  
html表单总结小笔记
preless的博客
06-16 1973
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间。 1. ：标签是成对出现的，以开始，以结束。 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3.method ： 数据传送的方式（get/post）。 下面来认识一下表单控件
HTML5表单自动验证总结
sgm222的博客
02-13 4132
1.required required属性表示此输入框是必填项，当提交的时候，如果此输入框为空，那么将提示用户输入后提交,默认值是true。 required用于检查表单控件非空 2.pattern pattern属性的值一般为正则表达式，当用户输入的内容符合正则表达式的格式，才能提交，否则提示输入有误 pattern根据表单控件上设置的格式规则验证输入是否为有效格式 3.
HTML5中表单重点总结
妖精小狗的博客
08-21 1791
表单： 在实际网页开发中通常采用post方式提交表单数据 属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text name 指定表单元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值