2.2.2HTML网页之form表单B

最新推荐文章于 2022-12-17 11:48:02 发布
最新推荐文章于 2022-12-17 11:48:02 发布
阅读量303 收藏
点赞数
分类专栏： 前端 文章标签： HTML网页之form表单B
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BossHAO/article/details/100939466
版权

2.2.2HTML网页之form表单B

描述：form表单
1.在form表单当中，使用HTML4版本的标签
文本框 密码框 单选按钮 多选按钮 下拉列表框 多行文本 文件上传 提交按钮 重置按钮 普通按钮

2.在form表单中，使用HTML5版本的标签
主要介绍H5的新特性
日期 date 数字 number 颜色 color 邮箱 email @

3.注意事项
3.1 单选按钮 — 要求： type radio name的名字必须一致
3.2 默认选择项
单选按钮 多选按钮 — checked=“checked”
下拉列表框 如果没有特殊设置，默认按照第一个选项进行显示
selected=“selected”
3.3 关于按钮
提交按钮和重置按钮，必须结合着form表单使用，如果单独使用，这两个按钮无效！
普通按钮，— 使用场所，任何地方都可以使用！
它必须结合这javascript事件来使用！
onclick — 点击事件
3.4 H5的新特性
type类型，由原来的text变为对应的数据类型，例如： number color email等
关于邮箱，必须结合这form表单以及提交按钮综合使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			<!--文本框-->
			账号:<input type="text" name="username" id="" value="" /><br />
			<!--密码框-->
			密码:<input type="password" name="pwd" id="" value=""/><br />
			<!--单选按钮-->
			性别: <input type="radio" name="sex" id="" value="1" checked="checked" />男
			     <input type="radio" name="sex" id="" value="0" />女
			<p>
				<!--多选框-->
				爱好:<input type="checkbox" name="hobby" id="" value="study"  checked="checked"/> 学习
				    <input type="checkbox" name="hobby" id="" value="game" checked="checked"/> 游戏
				    <input type="checkbox" name="hobby" id="" value="sleep"/> 睡觉
			</p>
			<p>
				<!--下拉列表框-->
				籍贯:<select>
					    <option>---请选择省份---</option>
					    <option>北京</option>
					    <option selected="selected">河北</option>
					    <option>天津</option>
					    <option>河南</option>
					    <option>山东</option>  
				    </select>
			</p>
			<p>
				<!--多行文本-->
				自我介绍:<textarea cols="20" rows="10"></textarea>
			</p>
			<!--文件上传-->
			<p>
				图片上传:<input type="file" name="" id="" />
			</p>
			<!--按钮-->
			<p>
				<input type="submit" name="" id="" value="提交" />
				<input type="reset" name="" id="" value="重置" />
				<input type="button" name="" id="" value="普通按钮" onclick="alert('陶慧杰最美，不管她就是最美的！')" />
				
			</p>
		</form>
	</body>
</html>
不戴眼镜的眼镜男
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
formb表单上传图片
qq_36725627的博客
05-04 311
1.首先在head里面写     meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 2.form标签写   <form id="pic_form" method="post" enctype="multipart/form-data" action=""> 3.js的点击函数里写   $('#pic_
HTML部分总结（form表单和table表格）
2301_77260619的博客
03-30 466
一，HTML介绍一，HTML介绍HTML它的全称为 HyperText Mark-up Language它是一种浏览解析的语言， 是由一些标签组成的超文本标记语言。大家日常种可以看到的无论是文本内容，图片，视频，还是持链接等，它都支持。（有趣的小知识：当浏览器在解析html这个页面时，会把它解析成一颗倒着的树。HTML有很多标签，常用的有如
【HTML基础篇002】HTML之form表单超详解
周周の博客小屋
12-17 8435
文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、标签
form表单
Lotus_fragrance的博客
06-27 1万+
目录1. form表单的基本使用1.2 表单的组成部分1.3标签的属性1.4 表单的同步提交及缺点 2. 通过Ajax提交表单数据2.1 监听表单提交事件2.2 阻止表单默认提交行为2.3 快速获取表单中的数据3. 案例 - 评论列表3.1 渲染UI结构3.2 JS代码#博学谷IT学习技术支持#表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。表单由三个基本部分组成：表单标签 表单域 表单按钮 ...
5.3.1 表单的提交和重置 -表单的使用- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】
杭州.黄老师
11-09 3506
5.3 表单的使用 在项目中，用户和服务端数据的交互大部分是通过表单来实现，我们这一小节来讲解表单的一些使用知识。 5.3.1 表单的提交和重置 我们对表单的操作，最常用的就是提交表单和重置表单。 提交表单 当我们需要将我们所填写的表单内容提交做处理的时候，在button按钮我们可以触发submit提交事件，我们需要分两步来定义： 第一步：定义提交按钮，在按钮button的属性中增加form-type=“submit”，格式如下 <button form-type="submit">按钮&l
HTML1.02 HTML标签属性
最新发布
09-13
HTML标签属性详解 HTML标签属性是HTML语言中最基本也是最重要的一部分。...以上是HTML标签属性的详细讲解，包括通用属性、自定义属性、table表格标签、form表单标签等。了解这些HTML标签属性是开发Web应用程序的基础。
基于Rails2.2.2的ajax
03-19
标题 "基于Rails2.2.2的ajax" 涉及的是使用Rails 2.2.2框架中的AJAX（Asynchronous JavaScript and XML）技术。Rails是一个基于Ruby编程语言的开源Web开发框架，它允许开发者以简洁、高效的方式构建动态网站。在...
HTML开发王
01-03
10.1.1 建立表单(form元素) 10.1.2 了解控件 10.1.3 控件类型 10.2 使用input元素创建表单控件 10.2.1 创建文本框和密码文本框 10.2.2 创建复选框 10.2.3 创建单选按钮 10.2.4 创建提交按钮 10.2.5 创建重置按钮 ...
form表单提交的几种方式
热门推荐
a1194821568的博客
06-04 17万+
表单提交方式一：直接利用form表单提交 html页面代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> <body> <form action="h...
使用jquery对form表单中的文本框和单选按钮进行操作
三月沙的专栏
04-03 500
版本为jquery 1.4.4   页面代码   &lt;!-- To change this template, choose Tools | Templates and open the template in the editor. --&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//...
Form2操作FORM1的方法 (委托方法)
shenhaha001的专栏
04-22 1096
public class MsgEventArgs:System.EventArgs//必须从这个类继承{public string textMsg;public MsgEventArgs(){}}public delegate void MyHandler(object sender,MsgEventArgs e); public class Form2 : System.Windows.
HTML-form表单+iframe
weixin_47345929的博客
11-24 1674
form 表单标签 form表单是标签是所有标签最核心标签之一，它是用来实现前后端交互的一个重要标签 常用属性： name：表单名称 action：表单数据提交的地方（通常是一个后台文件名（.jsp/.php/.asp/.aspx/.py等），或网址）。如果是#，表示提交到当前文件下。 method：前端提交数据到后台的方法，主要有get和post。默认的是get。 用get提交，数据会直接暴露出来，用past不会暴露显示的是action的值 表单元素有： input类：主要完成输入,选择或发出指令根据
窗体Form1和Form2 传值
xiaoxiang_feizi的专栏
12-08 5850
背景：窗体Form1和Form2 Form2由Form1打开（1、模式窗体 2、非模式） 要求：Form2的TextBox值传回Form1的TextBox中 方法： 情况一：（模式窗体）Form1 .ShowDialog（）打开Form2 view plaincopy to clipboardprint? Form1： public partial class Form1 : Form { public Form1() {
html中form表单的使用方法和介绍
王永存
10-04 8万+
form表单的使用方法 第1节、表单赏析 第2节、了解表单 功能：用于搜集不同类型的用户输入的内容   有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建都者，也是网页的消费者。 第2节、常用的表单元素 ü  form   表单 ü  input   表单元素，表单项 ü  select和option  下拉菜单 ü  tex
form表单绑定点击事件
天空影
04-24 8480
主要原因是这样的：我只想用form做查询，但是我并不想通过表单来提交数据，而是通过一个函数来提交，然后这就涉及到了我原先不懂的地方，就是提交按钮用submit还是button。原先一直没搞懂，一直都是点击后查询，也就是不用enter键，然后今天回过头又发现了这个不良好交互，自己试验了一下自己的猜想，结果发现原先自己可真的是太天真了，直接可以type="submit"然后再绑定点击事件，就会在输入框...
一个页面内放入文本框和按钮，实现文本框和按钮输绑定，输入圆半径，计算圆面积并弹窗计算结果显示出来。（js）
qq_48965298的博客
01-04 1629
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>面积</title> </head> <body> <input type="text" id="text"><br> <input type="button" value="计算" id="count"> <script&gt
4.2京东登陆界面上部分
BossHAO的博客
09-19 505
4.2京东登陆界面上部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>京东-欢迎登录</title> <link rel="icon" href="//www.jd.com/favicon.ico"/><!--显示网站的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值