项目总结（4）关于label标签和input标签在angular.js中的用法

以前的时候对于label这个标签用的也很少，所以只知道有个label for的用法。今天由于在项目中出现了一点小问题，所以就总结一下。

先说说label标签。首先label就是标签的意思。具体事例请看下面的例子：

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="radio" name="sex" id="female" /></form>

这个是我们经常用的和经常提起的，所以这个大家都不陌生。但是其中有几个要点。

1.for 属性规定 label 与哪个表单元素绑定。

2.for后面跟的是一个表单元素的id名，这个一定要记死。

然后还有就是label还可以这样用

显式的联系：<label for="SSN">Social Security Number:</label><input type="text" name="SocSecNum" id="SSN" />隐式的联系：<label>Date of Birth: <input type="text" name="DofB" /></label>

我估计大家对于这个隐式联系用的很少
隐式的联系：<label>Date of Birth: <input type="text" name="DofB" /></label>这个用的不多，其实显式联系和隐式联系最后实现的效果都差不多

然后在项目中这是这样的

for后面跟的是表单元素的id。

上面为什么会这样写呢，其实这是有原因的，这时就要牵扯到，input在angular.js中的用法了。

<script id="templates/registerPopupTpl.html" type="text/ng-template">    <div class='popup-close' ng-click='close()' ng-show='showCloseBtn'><i class='icon iconfont icon-quxiao1'></i></div>    <div class="activity-form-box">        <p ng-show="model.regist_custphone" class="tip">验证码已发送到{{model.regist_custphone | mobileFilter}}</p>        <form name="registerCodeForm" novalidate>            <div class="c-item-borderless c-item c-item-img-right ex-c-item-img-right c-item-button ex-c-item">                <label for="" class="c-item-input">                    <input type="tel"                           maxlength='6'                           validator='required, smsCode'                           name='smslog_vercode'                           valid-method='submit'                           required-error-message='请输入手机验证码'                           ng-model='model.smslog_vercode'                           placeholder='请输入验证码'/>                </label>                <span ng-click='send()' ng-bind='model.sendText' ng-disabled="!model.sendState" class="send-button button">获取验证码（50s）</span>            </div>            <div class="c-item-borderless c-item ex-c-item">                <label for="" class="c-item-input">                    <input id='kbH'                           ng-click='clickInput("activityShareRegister")'                           class='thcf-kb registerInput' type='text'                           placeholder='设置登录密码，6-16位'                           ng-bind='model.regist_custlogpwd'                           style='z-index: 9999;'                           maxlength='16'/>                </label>            </div>            <div class="button-box g-marginTop-20 ex-button-box">                <button class="button button-single" ng-style="activityBtnStyle" ng-disabled='!model.smslog_vercode' validation-submit='registerCodeForm'                    ng-click='register()'>确认</button>            </div>            <div class='text agreement'>我已阅读并同意                <a class='link' ng-click="agreement('a4')">《注册协议》</a>            </div>        </form>    </div></script>

这是整个的代码块。原来我是这样写的，

<input type="tel"       maxlength='6'       validator='required, smsCode'       name='smslog_vercode'       valid-method='submit'       required-error-message='请输入手机验证码'       ng-model='model.smslog_vercode'       placeholder='请输入验证码'/>

<input id='kbH'       ng-click='clickInput("activityShareRegister")'       class='thcf-kb registerInput' type='text'       placeholder='设置登录密码，6-16位'       ng-bind='model.regist_custlogpwd'       style='z-index: 9999;'       maxlength='16'/>

<button class="button button-single" ng-style="activityBtnStyle" ng-disabled='!model.smslog_vercode' validation-submit='registerCodeForm'    ng-click='register()'>确认</button>

它们之间没有div标签间隔，但是在项目中出现了问题，就是有时候button按钮消失了，特别是点击下面的点击下一步按钮。

这个button就没有了。why？

这是我问一个大神给我的回答，所以真是涨见识了，以后html标签使用的规范性不言而喻。

好吧，就这样总结到这吧！