项目总结（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标签使用的规范性不言而喻。

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

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

猜你喜欢