HTMLform表单组件

最新推荐文章于 2024-04-30 17:59:49 发布
最新推荐文章于 2024-04-30 17:59:49 发布
阅读量213 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46384325/article/details/107579286
版权

文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="name" />
		<script>
			document.getElementById("name").focus();//获取id为name的焦点
			function way(){
				var element = document.getElementById("name");
				console.log(element.value);
				element.value="ok";//设置
				element.readOnly=true;//只可读，不可操作
				/*element.disabled=true;//禁止使用*/
			}
		</script>
		<input type="button" value="测试" οnclick="way()"/>
	</body>
</html>

密码框

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="password" id="password" />
		<script>
			document.getElementById("password").focus();//获取id为password的焦点
			function way() {
				var element=document.getElementById("password");
				console.log(element.value);
				element.value = "ok"; //设置
				//element.readOnly=true;//只可读
				element.disabled = true;//禁用
			}
		</script>
 
		<input type="button" value="测试" onclick="way()" />
 
</html>

单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="radio" name="sex" value="男" />男
		<input type="radio" name="sex" value="女" />女
		
		<script>
			function way(){
				var elements=document.getElementsByName("sex");
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					console.log(element.checked+"——"+element.value);//显示是否选中以及显示value值
				}
			}
			//document.getElementsByName("sex")[0].checked=true;//默认选中男
			//document.getElementsByName("sex")[1].disabled=true;//禁止使用女
		</script>	
		<input type="button" value="测试" onclick="way()" />
	</body>
</html>

复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="hobby" id="hobby" value="篮球" />篮球
		<input type="checkbox" name="hobby" id="hobby" value="足球" />足球
		<input type="checkbox" name="hobby" id="hobby" value="羽毛球" />羽毛球
		<script>
			var elements = document.getElementsByName("hobby");
			function way(){
				for(var i=0;i<elements.length;i++){
					var element = elements[i];
					if(element.checked){
						console.log(element.value);
					}
				}
			}
			//elements[0].checked=true;//默认选中篮球
			//elements[1].disabled=true;//禁止使用足球
		</script>
		<input type="button" value="测试" onclick="way()" />
	</body>
</html>

下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="provience">
			<option value="">——请选择——</option>
			<option value="北京市">北京市</option>
			<option value="河南省">河南省</option>
			<option value="河北省">江西省</option>
		</select>
		<script>
			function way(){
				var element=document.getElementById("provience");
				var options = element.options;
				for(var i=0;i<options.length;i++){
					var option = options[i];
					console.log(option.selected+"."+option.value);//显示是否选中以及显示value值
				}
			//document.getElementById("provience").options[1].//选中北京市
			//document.getElementById("provience").disabled=true;//禁用下拉列表
		</script>
		<input type="button" value="测试" onclick="way()" />
	</body>
</html>
Stay_close
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap表单组件教程详解
09-02
此外，Bootstrap还提供了其他表单组件，如预填充的表单（.form-group.has-feedback）、帮助文本（.help-block）、验证状态（.has-error, .has-warning, .has-success）以及表单控制组（.form-control-feedback）等，...
HTML表单组件
qq_46126537的博客
07-05 609
目录表单标签form输入标签input多行文本标签textarea列表标签select按钮标签button域标签fieldset和域标题标签legendhtml5新特性新元素标签datalist新元素标签output新属性 表单标签form <form action="http://localhost/testform" method="post"> <!--内部可添加各种表单组件--> </form> GET方法：提交表单数据时，GET方法会将表单组件的数据名
js中的input 显示与隐藏
llt299022的博客
02-06 3838
<!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>Do
HTML中input输入框（详解输入框的用法）
最新发布
百赢出品，必属精品
04-30 5409
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
v-model --双向数据绑定
qq_45802159的博客
01-03 3155
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS中的表单
liu0218的博客
08-04 1821
作用：将用户填写的信息发送给服务器，例如账号注册、个人资料修改等等。表单控件等等
美观又功能齐全的HTML form表单
03-21
基本的HTML input 空间以及扩展都已加入进去 美观大方 , 功能齐全
详解基于原生JS验证表单组件xy-form
10-16
本文将深入探讨基于原生JavaScript的表单组件xy-form，它提供了一种更美观且易于定制的表单验证解决方案。原生HTML表单虽然内置了一些基础的验证功能，如`require`、`minlength`、`maxlength`以及不同类型的`input`...
angularJS提交表单（form）
10-24
在AngularJS中，表单（form）是数据绑定和用户交互的核心组件，它允许开发者创建动态、响应式的Web界面。本篇文章将深入讲解如何在AngularJS中使用表单以及相关的方法和示例。 首先，AngularJS中的表单是通过`ng-...
layui实现form表单同时提交数据和文件的代码
10-16
在这个例子中，我们创建了一个名为`userDiv`的弹出框，包含一个`layui-form`表单`userForm`。表单中有用户名、密码和确认密码等输入字段，以及一个用于上传头像的按钮`#test1`。值得注意的是，表单的`enctype`属性被...
HTML5密码输入框最新Demo 下载
05-19
最新的密码显示与隐藏输入框，直接修改input标签type版
html的form标签的基本介绍及使用
m0_74429510的博客
05-09 7580
开始，以
laravel5.5组件之 Forms & HTML 组件 (laravelcollective/html)
追风2019
11-20 2580
一、为什么要使用laravel的Forms&amp;HTML组件? 因为第一次用Laravel，虽然都在说laravel好，但自己没有意识到他好在哪里的时候，只能先用他已有的工具，Forms和HTML工具同样如此，感觉用起来也不省事，而且还不符合自己曾经编写HTML表单的习惯，看着怪别扭，上网查了一些资料，说是使用这个组件会减少HTML代码量，并且会协助创建CSRF（Cross Site Req...
html添加密码输入框,HTML input password密码输入框简介说明
热门推荐
weixin_33380613的博客
06-09 1万+
摘要:下文讲述html代码中input type=’password’时的相关属性简介说明,如下所示:input type=’password’ 简介当 input标签中 type=’password’时,代表此标签是一个单行文本密码输入框，单行文本密码框有一个显著的特点：就是输入的字符串都是一个“密文”的形式显示,单行文本密码框所包含的其它属性同password一样,如下所示：1.name:此属...
前端入门：HTML（表单）
yscy0801的博客
03-28 896
前端
HTML刷题：密码框和复选框
summerriver1的博客
07-05 730
HTML刷题：密码框和复选框
16、HTML密码框
you can you up up up的博客
10-30 2864
网页中最典型的应用密码框的场景就是网站的登录注册页面 在 HTML 中，把 <input> 标签的 type 属性设置为 password 可以表示密码框。具体语法格式如下： <input type="password" /> 接下来我们看一个具体的例子： 纯文本复制 <form action="http://vip.biancheng.net/login.php" method="post" name="myForm"> 密码:<input typ
HTML 登录页面_点击密码框小眼睛可显示输入密码_水平排列元素（高度不同）的底部对齐方式
追求卓越583的博客
02-08 1564
HTML 登录页面_点击密码框小眼睛可显示输入密码_水平排列元素（高度不同）的底部对齐方式
form表单model
09-13
在Ant Design Vue中，form表单的model属性是用来绑定表单数据的。通过将model属性设置为一个对象，可以将表单控件的值与该对象中的属性进行双向绑定。这样，在表单数据发生变化时，model对象的属性也会相应地更新。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值