24-表单

最新推荐文章于 2024-06-30 21:39:48 发布
最新推荐文章于 2024-06-30 21:39:48 发布
阅读量292 收藏
点赞数
分类专栏： angularJS 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gc_20160403/article/details/76251015
版权 

<!--实例解析

ng-app 指令定义了 AngularJS 应用。

ng-controller 指令定义了应用控制器。

ng-model 指令绑定了两个 input 元素到模型的 user 对象。

formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法，且在点击按钮时调用。

novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。 -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="js/angular.js"></script>
</head>
<body>
<!-- Checkbox（单选框）
我们可以使用 ng-model 来绑定单选按钮到你的应用中。
单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用
-->
<form>
  选择一个选项:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>
<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p><br><br><br><br>

<!-- 下拉菜单
使用 ng-model 指令可以将下拉菜单绑定到你的应用中。
ng-model 属性的值为你在下拉菜单选中的选项
-->
<form>
  选择一个选项:
  <select ng-model="myVar2">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>
<div ng-switch="myVar2">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>
<p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p><br><br><br><br>

<!-- novalidate-->
<form action="xxx.do" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>注意：</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。这个属性可以关闭浏览器默认校验</p><br><br><br><br>


<!--Checkbox（复选框）
checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中-->
<div ng-app="">
  <form>
    选中复选框，显示标题:
    <input type="checkbox" ng-model="myVar">
  </form>
  <h1 ng-show="myVar">My Header</h1>
</div>
<p>标题使用了 ng-show 指令，复选框选中后显示 h1 标签内容。</p><br><br><br><br>

<!-- HTML 表单
HTML 表单通常与 HTML 控件同时存在
以下 HTML input 元素被称为 HTML 控件:

    input 元素
    select 元素
    button 元素
    textarea 元素
-->
<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {

        $scope.user = angular.copy($scope.master);

    };
    $scope.reset();
});

</script>
</body>
</html>
jojo999888
关注
专栏目录
java web 表单提交_JavaWeb学习日记----表单提交方式
weixin_28797889的博客
02-12 1577
1.表单提交方式(1) 使用input控件中的submit提交代码如下：Title用户：密码：结果：上图是通过get方法使用input控件中的submit的表单提交方式(2)使用button提交表单步骤：通过ID获取form标签设置action(要提交的页面)调用submit()方法提交form表单代码如下：Titlefunctionsubmit1(){varmyForm =document.ge...
2014-11-24html表单实现思路1
08-08
通过JavaScript或其他脚本语言，表单中的数据能够被发送到服务器并保存到数据库中。这通常通过AJAX技术实现，允许页面在不刷新的情况下与服务器进行异步通信。 在HTML表单设计中，可以指定数据源，分为读取和保存两...
零基础HTML教程(24)--表单输入元素
程序员大阳
03-18 3092
表单元素介绍
JeecgBoot -表单信息校验
M_meng1025的博客
01-10 2442
1、登录 2、注册 3、找回密码
HTML-form表单
weixin_47782618的博客
04-03 2156
1. 什么是表单 表单是由窗体和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框、按钮叫做控件。表单很像容器，它能容纳各种各样的控件。 <form action="url" method="get|post" name="myform"></form> name：表单提交时的名称 action：表单提交到的地址 method：提交方式，默认值为get post和get的区别： ① url可以看到通过get提交的数据，而通过post的则不能。
uniapp：mosowe-form高级表单组件
mosowe
04-15 1164
演示地址 下载地址常年做web系统端，对web系统端的功能布局等有很深刻的了解，经常cv一些表单标签改来改去比较繁琐，重复性很多，且样式布局啥的几乎万变不离其中，为了偷懒，开发了mosowe-form及mosowe-table两款高级组件，其思路借鉴了antdesign的高级组件。这里面依赖的组件基本是uniapp官方的和自己二次封装的：uni-form uni-data-picker uni-datetime-picker uni-file-picker uni-easyinput uni-datetim
VUE3-Elementplus-form表单-笔记
最新发布
wj0712的博客
06-30 1279
1. 结构相关el-row表示一行，一行分成24份el-col表示列(1) :span="12" 代表在一行中，占12份 (50%)(2) :span="6" 表示在一行中，占6份 (25%)(3) :offset="3" 代表在一行中，左侧margin份数el-form 整个表单组件el-form-item 表单的一行 （一个表单域）el-input 表单元素（输入框）2. 校验相关。
Flask web开发实战之基础篇 Flask-表单
weixin_39451323的博客
03-25 6590
基础篇 第四章 Flask表单前言4. Flask 表单4.2　使用Flask-WTF处理表单4.2.1　定义WTForms表单类4.2.2　输出HTML代码4.2.3　在模板中渲染表单4.3　处理表单数据 前言 这一切开始于2010年4月1日，Armin Ronacher在网上发布了一篇关于“下一代Python微框架”的介绍文章，文章里称这个Denied框架不依赖Python标准库，只需要复制一份deny.py放到你的项目文件夹就可以开始编程。伴随着一本正经的介绍、名人推荐语、示例代码和演示视频，这
antd提交表单_antd-form表单操作
weixin_39693437的博客
12-31 2250
const{getFieldDecorator}=this.props.form;const formItemLayout={labelCol:{xs:{span:24},sm:{span:6},},wrapperCol:{xs:{span:24},sm:{span:14},},};constEditLargeSize=Form.create({当Form.Item子节点的值发生改变时触发，可以把...
Vue3 element-plus表单嵌套表格实现动态表单验证
路虽远，行则必至！
08-01 7722
rules对应data rules对象，prop对应表单字段（注意是表格里每一行对应的字段 forms.tableData[下标].key）prop的关键就在于下标 $index。
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 9197
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
PHP基础到高级开发教程-24 PHP的表单.mp4
10-18
PHP基础到高级开发教程-24 PHP的表单.mp4
ASP-CSS-HTML-reference.rar_asp reference_aspcss24-3
09-24
这个压缩包文件，"ASP-CSS-HTML-reference.rar_asp reference_aspcss24-3"，显然为开发者提供了一个便捷的工具集，无论你是初学者还是经验丰富的专业人士，都可以从中受益。 首先，我们来看看ASP。ASP是微软推出的...
09-指令ng-model-CSS类
不羁放纵爱自由的博客
07-24 629
<!--ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：ng-model 指令根据表单域的状态添加/移除以下类： ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristin
21-service之select下拉菜单
不羁放纵爱自由的博客
07-27 464
<!-- $watch：持续监听数据上的变化，更新界面 --> <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <script src="js/angular.js"></script> </head
17-service之$interval
不羁放纵爱自由的博客
07-27 454
<!-- $timeout 可用于设置单次或多次延时服务; $interval 可用于设置始终运行的延时服务。 --> <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <script src="js/angular.js"></script>
02-指令-ng-init
不羁放纵爱自由的博客
07-24 442
<!--ng-init指令 用于声明模型数据(变量) 可以在整个ng-app内使用 可以初始化数组、对象 、字符串、数值 但是我并不推荐使用这种方式来声明变量--><!DOCTYPE html> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <script sr
el-form 表单 一行三个
05-24
你可以使用 el-row 和 el-col 嵌套...每个 el-col 的 span 属性设置为 8，表示占用 8 格，一行共 24 格，这样就实现了一行三个的效果。每个 el-col 中再嵌套一个 el-form-item，用来展示表单项的 label 和表单控件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jojo999888

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值