html制作简单的表单＜form＞

最新推荐文章于 2024-06-11 11:30:38 发布
最新推荐文章于 2024-06-11 11:30:38 发布
阅读量6.2k 收藏 20
点赞数 3
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/isfor_you/article/details/108740417
版权

文章目录

一、使用到的标签用法介绍

1.演示标签代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="/demo/demo_form.asp">
			First name:<br>
			<input type="text" name="firstname" value="Lalisa">
			<br>
			Last name:<br>
			<input type="text" name="lastname" value="Manoban">
			<br><br>
			<input type="submit" value="提交">
		</form> 
	</body>
</html>

2.标签使用具体介绍

1. < form action=“获取/提交的地址” method=“post/get”>
post表示提交，get表示获取
get与post的区别：

  • get请求发送的数据都写在地址栏上，用户可见

  • post请求发送的数据用户不可见

  • get不能提交大量数据，但是post可以
    2.< input type=“类型” name=“自定义名称” value=“显示的文字” style=“设置长宽颜色等样式”>
    input必须放在form标签内才可以生效或提交
    type常见的属性值：

  • text 文本输入框

  • button 普通按钮

  • password 密码输入框

  • submit 提交

  • radio 单选框

  • reset 重置

  • checkbox 复选框

  • file 文本选择框
    style=“width:80px;height:30px;background:white;”

二、表单制作代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://提交的地址" method="post">
			<table width="600px" border="1px" cellspacing="0" cellpadding="">
				<tbody>
					<tr height="40px">
						<td rowspan="4" align="center" style="color: coral;">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr height="40px">
						<td align="right">用户名：</td>
						<td>
							<input type="text" name="loginname" id="" value="" />
						</td>
					</tr>
					<tr height="40px">
						<td align="right">密码：</td>
						<td>
							<input type="password" name="password" id="" value="" />
						</td>
					</tr>
					<tr height="40px">
						<td colspan="2" align="center">
							<input type="submit" name="" id="" value="提交" style="width: 80px;height:30px;background-color: antiquewhite;" />
							<input type="reset" name="" id="" value="重置"  style="width: 80px;height:30px;background-color:blueviolet;" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

三、结果显示

在这里插入图片描述

一枚小棋子
关注
  • 3
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML基础篇002】HTML之form表单超详解_html form表单
2401_84182392的博客
04-17 1129
(img-JrIfd5b3-1713343289604)]p204888 （备注大数据）**
html前端开发-----表单form
m0_51272779的博客
04-22 693
html前端开发-----表单form 基础案例 0基础入门
html-form表单
Black_Straight的博客
06-01 165
html-form表单
HTML 登录页表单
最新发布
南北极之间
06-11 953
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
【HTML】HTML实现简单表单（不含验证）
A Lucky Boy的博客
02-19 4770
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>这是.
HTML基础之表单制作
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
实验一 HTML 应用
Kuugo_的博客
09-26 223
利用 JavaScript 或者 jQuery 等完成页面元素合法性的校验，例如当用户输入 的姓名不符合要求的情况，一旦鼠标离开姓名输入框，则后面的文字变为红色；反之当用户输入的姓名符合要求时，鼠标离开姓名框则后面的文字变为绿色。设计实现一个用户注册页面，使用表单进行提交。页面应包含的元素如图 2-1 所示，注意选取适当的输入元素类型，并对其命名；表单的 action 属性课设置为空。图中“用户注册”几个字可以不和示意图一样。编写一个用户注册界面。2、实现用户输入信息的校验。
HTML制作表单ppt课件.ppt
11-15
在 HTML 文档中，<form></form> 标记，用来定义表单的开始和结束。在表单<form></form> 之间嵌入各类表单控件标记，供用户输入信息数据。表单控件标记和表单<form> 标记一起工作，共同发挥作用。 1.3 表单工作机制 ...
用HTML制作简单的网页.zip
10-22
`<form>`标签定义了表单，`<input>`、`<textarea>`、`<select>`等元素提供不同类型的输入控件。例如： ```html <form action="submit.php" method="post"> <label for="name">姓名：</label> <input type="text" ...
Html+css静态网页制作
01-09
在HTML中，我们可以使用各种标签来定义页面的不同部分，如`<header>`定义页眉，`<nav>`创建导航菜单，`<section>`分隔内容区域，`<article>`定义独立内容，`<footer>`表示页脚，以及`<form>`用于创建表单元素，使...
html表单制作及多种实例
11-09
- `<form>` 标签：这是所有表单的起点和终点，通过`action`属性定义数据提交的目标URL，`method`属性定义数据传输方式（GET或POST）。 - `<label>`：用于为输入元素提供可读的描述，通过`for`属性与`<input>`的`id...
CSS表单设计最简单的，最基本的，CSS表单代码，html代码，表单标准化设计
12-05
最简单的，最基本的，CSS表单代码，html代码，表单标准化设计
html简单网页制作，多个案例
12-22
此外，<form>用于表单输入，<input>定义不同类型的输入字段，如文本、密码、复选框或单选按钮，<button>创建按钮，<label>为输入元素提供关联文本，<textarea>定义多行文本输入。 在HTML5中，新增了若干功能强大的...
html表单制作及实例 + 打卡表单设计
11-12
HTML表单由`<form>`标签定义，它包含了用户输入的各种控件，如文本框`<input type="text">`、密码框`<input type="password">`、单选按钮`<input type="radio">`、复选框`<input type="checkbox">`、下拉列表`...
html制作的备忘录html制作的备忘录
06-27
5. **交互元素**：备忘录通常需要用户输入，所以会使用`<form>`元素来创建表单，`<input>`定义输入字段，`<textarea>`用于多行文本输入，`<button>`创建按钮。通过`<label>`元素关联输入字段和文本，提升可读性和...
基于CSS与HTML制作的简易小米网页
04-10
12. `<form>` 和 `<input>`：表单元素，用于用户输入。 **CSS (Cascading Style Sheets)** CSS是用于控制网页外观和布局的样式语言。在这个项目中，CSS可能涉及了以下概念和技术： 1. `选择器`：如`element`, `....
创建一个HTML的form表格表单
El Psy Congroo
05-05 8702
创建一个HTML的form表格形式的表单，我们要实现如图的样式：话不多说，直接上代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;用户信息&lt;/title&gt; &lt;/head&gt; &lt;body&
HTML之表单
李十八的博客
06-17 365
form 为比表单元素，它的 action属性表示提交地址，method 表示提交方式 有 post/get 两种 ，前者更为安全。它其中有很多属性可以实现很多功能，具体如下。 1、input input中有如下属性： type：类型 name: 名字 , 可以重复 id: 不能重复,保证全代码唯一 disabled: 禁用文本框 其中 type属性 有 text（文本框）、password（...
Html的表单
热门推荐
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
作业1： 用户输入数据后 提交checkbox 页面 将用户输入的信息按照表单方式展现出来 作业2： 制作简单计算机 如果 访问 改地址 http://localhost/web2.php?active=mol&num1=34&num2=45 这属于num1*num2 http://localhost/web2.php?active=add&num1=34&num2=45 结果为： num1+num2; http://localhost/web2.php?active=div&num1=34&num2=45 结果为： num1/num2; (注意考虑除数不能为0) http://localhost/web2.php?active=sub&num1=34&num2=45 结果为： num1-num2; --> <form action="checkbox.php" method="post"> <label>用户名：</label> <input type="text" value="" name="username"><br> <label>密码：</label> <input type="password" value="" name="password"><br> <input type="checkbox" name="hoby" value="唱歌">唱歌 <input type="checkbox" name="hoby" value="跳舞">跳舞 <input type="checkbox" name="hoby" value="看书">看书 <br> <input type="radio" value="woman" name="gender">女 <input type="radio" value="man" name="gender">男 <br> <section> <option>--请选择所在城市--</option> <option>长沙市</option> <option>北京市</option> <option>天津市</option> <option>武汉市</option> </section> <br> <textarea cols="40" rows="20"> </textarea> <input type="submit" value="提交"> </form>
05-30
</form> ``` 其中，checkbox 的 name 属性指定为 hoby[]，表示可以选择多个爱好，使用数组来存储。radio 的 name 属性分别为 gender，select 的 name 属性为 city，textarea 的 name 属性为 description。 接下来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值