简单的介绍在html中form表单元素的特性

最新推荐文章于 2024-06-15 21:20:00 发布
最新推荐文章于 2024-06-15 21:20:00 发布
阅读量169 收藏 5
点赞数 7
分类专栏： html 文章标签： html servlet java css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tea_tea_/article/details/125982650
版权

目录

                首先：第一步：老规矩，上

                第二步：我们添加一个表单

                第三步：我们通过表格，和input添加一些元素

                第四步：添加单选和复选框

                第五步：添加文本域

                第六步：添加提交按钮和重置按钮

 

        

首先：第一步：老规矩，上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
	</body>
</html>

        第二步：我们添加一个表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		-->
		 <form action="" method="get">
		    
		
		 </form>
	</body>
</html>

        第三步：我们通过表格，和input添加一些元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		-->
		 <form action="" method="get">
		     <table>
		         <tr>
		             <td>用户名：</td>
		             <td><input type="text" value="qwe" name="name"><br/></td>
		         </tr>
		         <tr>
		             <td>密码：</td>
		             <td><input type="password" value="asd" name="password"><br/></td>
		         </tr>
		       
		     </table>
		
		 </form>
	</body>
</html>

        第四步：添加单选和复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		-->
		 <form action="" method="get">
		     <table>
		         <tr>
		             <td>用户名：</td>
		             <td><input type="text" value="qwe" name="name"><br/></td>
		         </tr>
		         <tr>
		             <td>密码：</td>
		             <td><input type="password" value="asd" name="password"><br/></td>
		         </tr>
		         <tr>
		             <td>性别：</td>
		             <td><input type="radio" name="sex" value="男" checked/>男
		                 <input type="radio" name="sex" value="女"/>女
		             </td>
		
		         </tr>
		          <tr>
		             <td>兴趣爱好：</td>
		             <td><input type="checkbox" checked="checked" name="lq"/>篮球
		                 <input type="checkbox" name="zq"/>足球
		                 <input type="checkbox" name="ymq"/>羽毛球</td>
		         </tr>
		         <tr>
		             <td>国籍：</td>
		             <td>
		                 <select>
		                     <option>选择国籍</option>
		                     <option selected="selected" name="China">中国</option>
		                     <option name="USA">美国</option>
		                     <option name="jp">小日本</option>
		                 </select>
		             </td>
		         </tr>
		  
		     </table>
		
		 </form>
	</body>
</html>

                第五步：添加文本域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		-->
		 <form action="" method="get">
		     <table>
		         <tr>
		             <td>用户名：</td>
		             <td><input type="text" value="user" name="name"><br/></td>
		         </tr>
		         <tr>
		             <td>密码：</td>
		             <td><input type="password" value="abc" name="password"><br/></td>
		         </tr>
		         <tr>
		             <td>性别：</td>
		             <td><input type="radio" name="sex" value="男" checked/>男
		                 <input type="radio" name="sex" value="女"/>女
		             </td>
		
		         </tr>
		         <tr>
		             <td>兴趣爱好：</td>
		             <td><input type="checkbox" checked="checked" name="lq"/>篮球
		                 <input type="checkbox" name="zq"/>足球
		                 <input type="checkbox" name="ymq"/>羽毛球</td>
		         </tr>
		         <tr>
		             <td>国籍：</td>
		             <td>
		                 <select>
		                     <option>选择国籍</option>
		                     <option selected="selected" name="China">中国</option>
		                     <option name="USA">美国</option>
		                     <option name="jp">早日噶的小日本</option>
		                 </select>
		             </td>
		         </tr>
		         <tr>
		             <td>介绍：</td>
		             <td><textarea cols="30" rows="20" name="introduce">默认值</textarea><br/></td>
		         </tr>
		        
		
		     </table>
		
		 </form>
	</body>
</html>

                第六步：添加提交按钮和重置按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		-->
		 <form action="" method="get">
		     <table>
		         <tr>
		             <td>用户名：</td>
		             <td><input type="text" value="user" name="name"><br/></td>
		         </tr>
		         <tr>
		             <td>密码：</td>
		             <td><input type="password" value="abc" name="password"><br/></td>
		         </tr>
		         <tr>
		             <td>性别：</td>
		             <td><input type="radio" name="sex" value="男" checked/>男
		                 <input type="radio" name="sex" value="女"/>女
		             </td>
		
		         </tr>
		         <tr>
		             <td>兴趣爱好：</td>
		             <td><input type="checkbox" checked="checked" name="lq"/>篮球
		                 <input type="checkbox" name="zq"/>足球
		                 <input type="checkbox" name="ymq"/>羽毛球</td>
		         </tr>
		         <tr>
		             <td>国籍：</td>
		             <td>
		                 <select>
		                     <option>选择国籍</option>
		                     <option selected="selected" name="China">中国</option>
		                     <option name="USA">美国</option>
		                     <option name="jp">早日噶的小日本</option>
		                 </select>
		             </td>
		         </tr>
		         <tr>
		             <td>介绍：</td>
		             <td><textarea cols="30" rows="20" name="introduce">默认值</textarea><br/></td>
		         </tr>
		        
		          <tr>
		             <td>
		                 <input type="reset"/>
		                 <input type="submit" value="提交"/>
		             </td>
		         </tr>
		     </table>
		
		 </form>
	</body>
</html>

                最后效果图

 

 

Tea-pd
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html表单验证元素必填,html5 form-Validity验证函数
weixin_42299427的博客
06-11 1265
h5 为表单新增了很多类型，及属性。根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数，这些验证表单的函数都存在了ValidityState对象中，接下来让我们一起来了解一下这些函数的用法：ValidityState对象ValidityState对象是通过validity 属性获取的，该对象有8个属性，分别针对8个方面的错误验证，属性值均为布尔值。1．valueMissing属性必...
HTML中Form表单的使用汇总
m0_67846661的博客
05-19 1193
表单元素：不同类型的 input 元素， 复选框，单选框， 提交按钮 。 其中 input 元素有不同形态即type属性：text文本，radio单选，submit提交。value是值，submit表单处理程序[form-handler]提交表单的按钮：action指定表单处理程序。 <form action="1.jsp" name="messages" method="GET" target="self"> <input type="text" name="usern...
HTML5系列代码：form特性
BLOG域名:programb.blog.csdn.net
06-26 191
form 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。 <!DOCTYPEHTML> <html> <head> <meta charset="utf-8"> <title>form特性</title> </head> .
input标签中radio,checkbox和select的表单验证显示问题
zzu_wlan的博客
07-31 2851
昨天学习了Javascript的一些用法，最后简单的验证了一些表单的信息。 随之实践的深入，发现表单中有一些标签如 <input type=" radio ">和<input type="checkbox "> 这两个标签在使用时为多个一起出现功能为单选和多选。例如在DAY2实例表格中的性别和兴趣 这时我们所要验证表单返回的信息便不是固定的和唯一的，而因...
html表单类型select,关于Select等Form表单元素使用介绍
weixin_35606595的博客
06-19 872
关于Select等Form表单元素，在使用的时候部分特性会失效如select自带的Search功能：其实在使用Form表单元素的时候，你如果需要layui自带的一些功能(搜索，验证等)，请用标签括起来，并且需要初始化form对象，这样才能渲染生效。类似的还有选项卡的需要初始化element对象//注意：选项卡 依赖 element 模块，否则无法进行功能性操作layui.config({base:...
HTML5中form表单验证
qq_46251737的博客
04-22 1168
自定义错误 首先，HTML5的表单中有很多错误提示消息,但这些错误提示信息是系统写死的。 有时候HTML5自带的错误提示消息，不能详细的描述错误，这时候就要抛出一个自定义的错误提醒。 如何自定义错误信息 首先我们要了解HTML5为所有表单元素添加了一个JS属性：input.validity(有效性) validity属性 validity属性提供了关于表单字段的一组信息，值是布尔值(true/false)。 返回的对象(validityState)包含以下属性： badInput: false //
【HTML基础篇002】HTML之form表单超详解
周周の博客小屋
12-17 8160
文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、标签
html5中新增的form元素
Cherish599的博客
08-06 1494
1、datalist元素 datalist标签规定了 input元素可能的选项列表。 datalist> 签被用来在为 input 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。 请使用 input元素的 list 属性来绑定 元素。 <input type="text" list="countries" /> ...
HTML基础--Form表单--内联元素
m0_67093160的博客
08-31 1063
HTML基础之Form表单
html表单中默认选中的值,前端学习笔记一一HTML表单标签（form）
weixin_35886660的博客
06-22 2895
form表单细节一、表单1.表单 标签用于为用户输入创建 HTML 表单2.表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。3.表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。4.表单用于向服务器传输数据。二、表单form 的属性(一)action属性action 属性规定当提交表单时，向何处发送表单数据属性值：url...
html5 input元素新特性_动力节点Java学院整理
01-19
元素在HTML5中新增加的属性有：autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。...
HTML学习笔记（五）——表单
01-08
表单的概述 表单在网页中起着重要的作用，它是与用户交互信息的主要手段。...新的HTML5对目前的Web表单进行了...在HTML中，只要在需要使用表单的地方插入成对的标记form，就可以很简单地完成表单的插入。其代码示例如下：
HTML 表单基础知识.pdf
11-23
在本篇文章中，我将一步一步讲述如何创建 HTML 表单，从最基本和最简单的表单到更复杂的表单。 第一步：基本代码 在创建一个简单的评论表单时，我们可以使用以下代码： <form> Name: Email: Comments: ...
html实现a元素href的URL链接自动刷新或新窗口打开功能
01-19
无论是a链接元素还是form表单元素都有一个名叫target的属性，支持的值包括下面这些： _self：默认值。当前浏览器上下文。 _blank：通常是一个新的标签页，但是用户可以配置浏览器，是否在新窗口打开。 _parent：...
HTML前端
最新发布
2302_77125952的博客
06-15 313
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。提供许多标签，不同标签功能不同，网页就是通过这些标签描述出来的，最终由浏览器解释运行我们看到的网页。HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。<标签 属性=“ ”/>完成一个特定的设置功能，没有标签体 换行标签。<开始标签>标签名</结束标签> 闭合标签（双标签）标签中可以有属性：可以标签属性。table标签：表格标签。tr标签：表格中的行。td标签：表格单元格。
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1107
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置
weixin_42429220的博客
06-15 327
如果您正在使用进行快速的Electron应用程序开发，您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。MacOS窗口图像由提供，来源。
DAY02 HTML
adminstate的博客
06-15 625
HTML基础学习
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 639
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
请写一篇教程介绍HTML元素
03-27
HTML元素是构成HTML页面的基本组成部分，它们用于定义页面的结构、内容和样式。本教程将向您介绍HTML元素的基本语法和使用方法。 1. HTML元素的基本语法 HTML元素由一个开始标签、一个结束标签和它们之间的内容组成，如下所示： ``` <标签名>内容</标签名> ``` 开始标签通常以`<`开头，结束标签以`</`开头，标签名紧跟着。开始标签和结束标签之间可以包含元素的内容。 有些元素没有结束标签，它们是自闭合的，如`<br>`标签。 2. HTML元素的常见属性 HTML元素可以有属性，它们用于指定元素的特性和行为。常见的属性有： - `class`：指定元素的样式类名； - `id`：指定元素的唯一标识符； - `style`：指定元素的样式； - `src`：指定元素的资源路径； - `href`：指定元素的超链接目标； - `alt`：指定元素的替代文本。 属性通常包含在开始标签中，如下所示： ``` <标签名 属性名1="属性值1" 属性名2="属性值2">内容</标签名> ``` 3. HTML元素的常见类型 HTML元素有很多种类型，这里列举一些常见的类型及其作用： - 标题类型：用于定义页面的标题，包括`<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`和`<h6>`； - 段落类型：用于定义文本段落，包括`<p>`； - 列表类型：用于定义有序列表和无序列表，包括`<ol>`、`<ul>`和`<li>`； - 超链接类型：用于定义超链接，包括`<a>`； - 图像类型：用于定义图像，包括`<img>`； - 表格类型：用于定义表格，包括`<table>`、`<tr>`、`<th>`和`<td>`； - 表单类型：用于定义表单，包括`<form>`、`<input>`、`<label>`、`<select>`、`<textarea>`和`<button>`。 4. HTML元素的嵌套和层级关系 HTML元素可以相互嵌套和包含，形成层级关系。例如，一个列表项`<li>`可以包含一个超链接`<a>`，而一个超链接`<a>`可以包含一个图像`<img>`。 HTML元素的层级关系影响它们的样式和行为。例如，一个元素的样式可能会被它的父元素的样式所覆盖，而一个表单元素的行为可能会受到它所在表单的限制。 以上是HTML元素的基本介绍，希望对您有所帮助。如果您想深入了解HTML元素的使用方法，可以参考相关的教程和文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值