// 1、实现输入数字输出对应汉字，要求使用angularjs，不准使用$watch函数，for循环；提示：ng-change指令

<div ng-app="myApp" ng-controller="changeCtrl"> // 定义一个app指令    定义一个controller 指令用于为你的应用添加控制器。在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。

数字: <input ng-model="number" ng-change="changeFunc(number)"> // ng-model 指令绑定了 HTML 表单元素到 scope 变量中。 如果 scope 中不存在变量, 将会创建它。    ng-change 事件在值的每次改变时触发

<h1>你输入了: {{result}}</h1> // 和ng-model数据绑定的值

</div>

<script>
var app = angular.module('myApp', []);  // 新建一个模块，注意新的模块需要在 app.js 里面引入
app.controller('changeCtrl', function($scope) { // 建立controller方法 供html使用
$scope.number = ""; // 这里是input框中出现的值
$scope.result = ""; // 结果是h1中出现的值
var array=["零","一","二","三","四"，"五","六","七","八","九","十"];

$scope.changeFunc=function(number){ // 定义一个ng-change方法,当input内的值改变时出发（input内输入一个值，方法改变一次）
console.log("number=",number);
if(number != ''){ 
$scope.result = "";

var atr=number.replace(/(.)(?=[^$])/g,"$1,").split(",");//第一种         // 通过截取的形式每一个数字添加‘，’split把字符串变成数组 
atr.forEach(function(e){ // 循环数组atr
$scope.result += array[e];
});

/*for(var a in number){ //第二种 
console.log("number[a]=",number[a]);
var i = parseInt(number[a]);
$scope.result += array[i];
}*/
}
};


});
</script>

一、封装获取元素的方法

封装思想——函数封装——代码复用

 function get_id(id){
     // 这个函数是专门来通过id获取元素
     return document.getElementById(id)
 }
 
 function get_els(parentId, tagName){
     // 这个函数是专门来获取某个父标签范围内的某些标签
     return get_id(parentId).getElementsByTagName(tagName)
 }

在 React 项目中使用 Ant Design（Antd）的 Form 组件能快速构建标准化表单，特别适合中后台系统开发。以下是结合 Antd 的 最佳实践

无论我们使用什么语言来完成web开发，都必然会用到HTML表单标签，HTML表单标签在开发中经常会被我们用来去收集我们想要得到的数据信息，基本上所有的网页都有表单的利用，表单合理的使用和布局是作为一个前端开发者所必须具有的基本技能。

表单标签结构树：

SMValidator是一个易用、轻量且强大的表单验证工具。支持html和javascript两种配置方式，可以立即或手动触发验证，独立显示每条规则的信息，可自定义表单或信息容器的样式。目前minify文件还不到5KB，而且不依赖任何第三方库。

使用方法：

1. 给input指定验证规则

<!--使用data-rule属性指定验证规则-->
<input type="text" data-rule="required">

search类型元素

search类型的input元素是一种专门用来输入搜索关键词的文本框。其代码格式如下。

<input type="search" name="user_search1"/>

一、灵活配置能力

1. JSON驱动开发
   支持通过结构化JSON数据动态生成表单，配置项覆盖字段类型、布局规则和联动逻辑，开发者无需编写重复模板代码即可实现复杂表单渲染。

formDesigner是基于vue+elementui的表单设计器，可视化拖拽，让表单拖拽更加简单，用户通过拖拽、配置等低代码/无代码方式快速创建表单页面，无需手写 HTML、CSS 或 JavaScript，它广泛应用于后台管理系统、CRM、OA、工作流、问卷、报名系统等场景，让非技术人员也能独立完成数据收集与流程搭建。

在 Python 开发中，特别是结合 Web 开发（如 Flask 或 Django）

HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。

一、HTML表单