HTML表单标签

一、表单的组成：

表单域、表单控件（表单元素）、提示信息。

二、表单域：

     包含表单元素的区域。

•        <form>标签用于定义表单域，

       <form>会把它范围内的表单元素信息提交给服务器。

   <form action=”url地址”method=”提交方式”name=”表单域名称”>

       各种表单元素控件

   </form>

常用元素：

三、表单元素

   1. <input>（用于收集用户标签）

<input type=”属性值” />

• <input>为单标签
• type属性设置不同的属性值用来指定不同的控件类型

   1.1  type属性的属性值

 还有一些其他的：

• <input type="number">：会自动使任何不是数字的条目失效（或者是空的，除非required被指定）。

                    1）required属性使一个空条目无效，即必须填写输入。

                    2）step属性将有效值限制为某一组步骤（例如，10的倍数）。

                    3）min和max属性将有效值限制为下限和上限。

例：<input type="number" required="required" value="24" min="15" max="120" class="one"/>

•  <input type="email">：输入和编辑电子邮件地址的类型元素

                     1）multiple  布尔属性：接受多个电子邮件地址。

                     2）更多：https://cloud.tencent.com/developer/section/1189706

•  <input type="tel">：用于让用户输入电话号码。

                     1）但是在表单提交之前，输入值不会自动验证为特定的格式。

                     2）若想要输入中国手机号，就在input里加入：

pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"

• <input type="url">：用于输入和编辑url。

                    1）提供默认选项表：<datalist>其中<option>每个建议值包含一个元素; 每个option的                             value是网址输入框相应的建议值。

例：  

<input id="myURL" name="myURL" type="url" list="defaultURLs">
    <datalist id="defaultURLs">
        <option value="http://www.example.com">
        <option value="https://www.example.com">
        <option value="http://www.example.org">
        <option value="https://www.example.org">
    </datalist>

•  <input type="file">：用于文件选择。 ​​​​​​​

                     若多文件选择：<input type="file" multiple >

1.2  <input>标签的其他属性：

1. name和value是每个表单元素都有的属性值，主要给后台人员使用。
2. name表单元素的名字，要求单选按钮和复选框要有相同的name值。
3. checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。
4. maxlength是用户可以在表单元素输入的最大字符数，同理，minlength是最小。

 1.3  其他的属性：

• required属性：来设置必填项，需要在input元素标签中添加“required="required"”样式即可。   required属性规定必需在提交之前填写输入字段。

  使表单文本框只读不可编辑的方法：

                             1） οnfοcus=this.blur() 当鼠标放不上就离开焦点

             例：<input type="text" name="input1" value="中国" οnfοcus=this.blur()> 

                              2）readonly：  readonly="true" 文字不会变色，也是不可编辑的

              例：<input type="text" name="input1" value="中国" readonly>    或

                     <input type="text" name="input1" value="中国" readonly="true">

                              3）disabled：disabled="true" 文字会变成灰色，不可编辑。

              例：<input type="text" name="input1" value="中国" disabled="true">

                             * 4）css屏蔽输入：<input style="ime-mode: disabled">

• 添加提示文字：

                       1）placeholder 属性:添加提示的文字，当要输入文字的时候，提示的文字消失。

                          <input type="text" placeholder="这里是提示的文字"> 

                        2）js 方法添加 input 元素提示文字   

     <input type="text"  οnfοcus="javascript:if(this.value=='请输入内容')this.value='';">

注：A) placeholder 属性添加的提示文字，只有输入内容时文字才会消失

       B) js 方式添加的提示文字，当光标定位到 input 输入框中时，提示文字就会消失

• pattern属性*：验证表单输入的内容

pattern属性https://blog.csdn.net/GLyihu/article/details/89315208

• autofocus属性：自动获得焦点

<input type="text" name="fname" autofocus="autofocus" />  

2. <label>标签

   用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将光标（焦点）转到（选择）对应的表单元素上来。

 <label for=”ys”>元素</label>

 <input type=”radio” name=”yuansu” id=”ys”/>

核心：<label>标签的for属性应当与相关的id属性相同。

3. <select>表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且节约空间，可以使用<select>标签定义下拉列表

<select>

    <option>选项1</option>

    <option>选项2</option>

    <option>选项3</option>

    …     …

</select>

注意：1.<select>中至少包含一对<option>

           2.在<option>中定义selected=”selected”时，当前选项即为默认值

         （<option selected=” selected”>）

4. <textarea>表单元素

   可以输入很多文字，输入内容较多时使用。可以创建多行文本框。

<textarea rows=”3”cols=”20”>

     文本内容

</textarea>

 （cols=“每行的字符数”，rows=“显示的行数”可以用css来改变大小）