表单与文件代码段记录（一）-原创手记-慕课网

表单{
表单标签：即<form>标签，用于申明表单，定义采集数据的范围，即<form>中包含的数据将被提交到服务器上
<form action="url" method="get/post" enctype="mime" target="xx"></form>
表单域:包含了文本框、隐藏域、密码框等，常用的是输入标签<input>
表单按钮:包括提交按钮、复位按钮、一般按钮
}

       <form name="input" action="html_form_action.php" method="post">
            <div class="login-item">
                <input type="hidden" id="savalogin" name="savelogin" value="0"/>
            </div>
            <div class="login-item">
                <label for="idInput" class="placeholder" id="idPlaceholder">邮箱 ：</label>
                <input class="formlpt formlpt-focus" tabindex="1" title="请输入账号" id="idInput" name="username"
                     type="text" maxlength="50" value="" autocomplete="on" />
            </div>
            <div class="login-item">
                <label for="pwdInput" class="placeholder" id="pwdPlaceholder">密码：</label>
                <input class="formlpt formlpt-focus" tabindex="2" title="请输入密码" id="pwdInput"
                    name="password" type="password"/>
            </div>
            <div class="login-submit">
                <button id="loginBtn" class="btn btn-main btn-login" tabindex="6" type="submit">登&nbsp;&nbsp;录</button>
                <button id="loginBtn" class="btn btn-main btn-login" tabindex="6" type="reset">重&nbsp;置</button>
            </div> 
        </form>

图片描述

autofocus属性可以自动聚焦：页面加载完成后自动将输入焦点定位到需要的元素

<div class="login-item">
                <label for="idInput" class="placeholder" id="idPlaceholder">邮箱 ：</label>
                <input **autofocus** class="formlpt formlpt-focus" tabindex="1" title="请输入账号" id="idInput" name="username"
                     type="text" maxlength="50" value="" autocomplete="on" />
            </div>

图片描述

autofocus只能用在设置一个元素上，如果多个元素都设置了autofocus属性，那么将会是最后一个元素获取了焦点。

如果不让用户操作某个input元素的内容可以设置禁用。disabled属性
（用户在按下提交按钮后，利用JS将提交按钮设置为禁用，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致冗余的数据存入数据库）

<div class="login-item">
                <label for="pwdInput" class="placeholder" id="pwdPlaceholder">密码：</label>
                <input **disabled** class="formlpt formlpt-focus" tabindex="2" title="请输入密码" id="pwdInput"
                    name="password" type="password"/>
            </div>

图片描述
disabled表示禁用元素，不可编辑，不可复制，不可选择，不能接收焦点，后台也不会接收到数据

设置为只读 readonly 会把值传出去
readonly只针对 input(text/password)和textarea有效，disabled对于所有表单元素都有效

<div class="login-item">
                <label for="pwdInput" class="placeholder" id="pwdPlaceholder">密码：</label>
                <input **readonly="readonly"** class="formlpt formlpt-focus" tabindex="2" title="请输入密码" id="pwdInput"
                    name="password" type="password"/>
            </div>

图片描述

关闭输入框自动提示功能autocomplete

<input title="html代码" name="demo" type="text" autocomplete="off" />

关闭输入法
仅能输入英文字符集

<input type="text" style="ime-mode: disabled;" />