HTML学习12-表单1

1、表单的应用场景：

主要用于采集和提交用户输入的信息；

应用：注册页面等，传送数据到服务器，与服务器进行交互；

表单的标签是

表单里面包含了表单元素

元素包含一个或多个如下的表单元素：

</li> <li><button></li> <li><select></li> <li><option></li> <li><optgroup></li> <li><fieldset></li> <li><label></li> </ul> <p><strong><span style="font-size: 18px">form表单的属性如下：</span></strong></p> <table id="table1" class="reference notranslate " style="height: 453px; width: 1193px"> <tbody> <tr><th align="left" width="20%">属性</th><th align="left" width="37%">值</th><th align="left" width="43%">描述</th></tr> <tr> <td>accept</td> <td>MIME_type</td> <td><span class="deprecated">HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）</span></td> </tr> <tr> <td>accept-charset</td> <td>character_set</td> <td>规定服务器可处理的表单数据字符集。</td> </tr> <tr> <td>action</td> <td>URL</td> <td>规定当提交表单时向何处发送表单数据。</td> </tr> <tr> <td>autocomplete<span class="new">New</span></td> <td>on<br>off</td> <td>规定是否启用表单的自动完成功能。</td> </tr> <tr> <td>enctype</td> <td>application/x-www-form-urlencoded<br>multipart/form-data<br>text/plain</td> <td>规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）</td> </tr> <tr> <td>method</td> <td>get<br>post</td> <td>规定用于发送表单数据的 HTTP 方法。</td> </tr> <tr> <td>name</td> <td>text</td> <td>规定表单的名称。</td> </tr> <tr> <td>novalidate<span class="new">New</span></td> <td>novalidate</td> <td>如果使用该属性，则提交表单时不进行验证。</td> </tr> <tr> <td>target</td> <td>_blank<br>_self<br>_parent<br>_top</td> <td>规定在何处打开 action URL。</td> </tr> </tbody> </table> <p><span style="font-size: 18pt"><strong>2、input标签；<input type="" /></strong></span></p> <p><span style="font-size: 14pt">i</span><span style="font-size: 18pt"><strong><span style="font-size: 14pt">npu</span>t标签的属性</strong>如下所示：</span></p> <table class="reference "> <tbody> <tr><th align="left" width="22%">属性</th><th align="left" width="37%">值</th><th align="left" width="41%">描述</th></tr> <tr> <td>accept</td> <td>audio/*video/*image/*MIME_type</td> <td>规定通过文件上传来提交的文件的类型。(只针对type="file")</td> </tr> <tr> <td>align</td> <td>leftrighttopmiddlebottom</td> <td><span class="deprecated">HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")</span></td> </tr> <tr> <td>alt</td> <td>text</td> <td>定义图像输入的替代文本。 (只针对type="image")</td> </tr> <tr> <td class="style1">autocomplete<span class="new">New</span></td> <td>onoff</td> <td>autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。</td> </tr> <tr> <td>autofocus<span class="new">New</span></td> <td>autofocus</td> <td>属性规定当页面加载时 <input> 元素应该自动获得焦点。</td> </tr> <tr> <td>checked</td> <td>checked</td> <td>checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")</td> </tr> <tr> <td>disabled</td> <td>disabled</td> <td>disabled 属性规定应该禁用的 <input> 元素。</td> </tr> <tr> <td>form<span class="new">New</span></td> <td>form_id</td> <td>form 属性规定 <input> 元素所属的一个或多个表单。</td> </tr> <tr> <td>formaction<span class="new">New</span></td> <td>URL</td> <td>属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")</td> </tr> <tr> <td>formenctype<span class="new">New</span></td> <td>application/x-www-form-urlencodedmultipart/form-datatext/plain</td> <td>属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。</td> </tr> <tr> <td>formmethod<span class="new">New</span></td> <td>getpost</td> <td>定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")</td> </tr> <tr> <td>formnovalidate<span class="new">New</span></td> <td>formnovalidate</td> <td>formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。</td> </tr> <tr> <td>formtarget<span class="new">New</span></td> <td>_blank_self_parent_topframename</td> <td>规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")</td> </tr> <tr> <td>height<span class="new">New</span></td> <td>pixels</td> <td>规定 <input>元素的高度。(只针对type="image")</td> </tr> <tr> <td>list<span class="new">New</span></td> <td>datalist_id</td> <td>属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。</td> </tr> <tr> <td>max<span class="new">New</span></td> <td>numberdate</td> <td>属性规定 <input> 元素的最大值。</td> </tr> <tr> <td>maxlength</td> <td>number</td> <td>属性规定 <input> 元素中允许的最大字符数。</td> </tr> <tr> <td>min<span class="new">New</span></td> <td>numberdate</td> <td>属性规定 <input>元素的最小值。</td> </tr> <tr> <td>multiple<span class="new">New</span></td> <td>multiple</td> <td>属性规定允许用户输入到 <input> 元素的多个值。</td> </tr> <tr> <td>name</td> <td>text</td> <td>name 属性规定 <input> 元素的名称。</td> </tr> <tr> <td>pattern<span class="new">New</span></td> <td>regexp</td> <td>pattern 属性规定用于验证 <input> 元素的值的正则表达式。</td> </tr> <tr> <td>placeholder<span class="new">New</span></td> <td>text</td> <td>placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。</td> </tr> <tr> <td>readonly</td> <td>readonly</td> <td>readonly 属性规定输入字段是只读的。</td> </tr> <tr> <td>required<span class="new">New</span></td> <td>required</td> <td>属性规定必需在提交表单之前填写输入字段。</td> </tr> <tr> <td>size</td> <td>number</td> <td>size 属性规定以字符数计的 <input> 元素的可见宽度。</td> </tr> <tr> <td>src</td> <td>URL</td> <td>src 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")</td> </tr> <tr> <td>step<span class="new">New</span></td> <td>number</td> <td>step 属性规定 <input> 元素的合法数字间隔。</td> </tr> <tr> <td>type</td> <td>button <br>checkbox <br>color <br>date <br>datetime <br>datetime-local <br>email <br>file <br>hidden <br>image <br>month <br>number <br>password <br>radio <br>range <br>reset <br>search <br>submit <br>tel <br>text <br>time <br>url <br>week</td> <td>type 属性规定要显示的 <input> 元素的类型。</td> </tr> <tr> <td>value</td> <td>text</td> <td>指定 <input> 元素 value 的值。</td> </tr> <tr> <td>width<span class="new">New</span></td> <td>pixels</td> <td>width 属性规定 <input> 元素的宽度。 (只针对type="image")</td> </tr> </tbody> </table> <p><span style="font-size: 18px"><strong>3、input标签的type属性如下：</strong></span></p> <p></p> <p><span style="font-size: 18px"><strong>4、type的属性text是一个单行文本域，换行用到<br></strong></span></p> <pre class="brush:html;gutter:true;"><tr height="40" valign="middle"> <td align="right">用户名</td> <td> <input type="text" name="用户名" size="25" maxlength="6" placeholder="username"/><br></td> </tr> </pre> <p>　<strong>size表示文本框的宽度，以字符数来计算，但是实际使用时不同浏览器会有差异，并且跟字体的类型也有关系，建议使用width替代</strong></p> <p><strong>placeholder表示提示的文本，只对输入文本类型的有效并且文本框内无默认值，value表示文本框中的默认值；显示效果如下：</strong></p> <p><strong></strong></p> <pre class="brush:html;gutter:true;"> <tr height="40" valign="middle"> <td align="right">邮箱</td> <td><input type="text" name="email" size="25" value="163.com" placeholder="Email"/></td> </tr> </pre> <p><span style="font-size: 14pt">5、file表示需要上传文件</span></p> <pre class="brush:html;gutter:true;"> <tr height="40" valign="middle"> <td align="right">上传照片</td> <td><input type="file" name="image" size="25" /></td> </tr> </pre> <p><strong></strong></p> <p><span style="font-size: 18px">6、radio 单选按钮只能选择一个，并且name属性必须一样，才可以为一组，否则无法单选，value值建议不一样；可以用checked属性来预选定一个；</span></p> <pre class="brush:html;gutter:true;"> <tr height="40" valign="middle"> <td align="right">性别</td> <td> 男<input type="radio" name="sex" size="25" value="男"/> 女<input type="radio" name="sex" size="25" value="女" checked="checked"/> </td> </tr> </pre> <p></p> <p>　　</p> <p><span style="font-size: 18px">7、checkbox复选框，可以选择多个；可以用checked属性来预选定一个；</span></p> <pre class="brush:html;gutter:true;"> <tr height="40" valign="middle"> <td align="right">爱好</td> <td> 读书<input type="checkbox" name="aihao" size="25" value="读书"/> 跳舞<input type="checkbox" name="aihao" size="25" value="跳舞" checked="checked"/> 唱歌<input type="checkbox" name="aihao" size="25" value="唱歌"/> </td> </tr> </pre> <p><span style="font-size: 18px">8、submit是提交按钮，按钮上的文字可以使用value值填入；</span></p> <p><span style="font-size: 18px">button是按钮，按钮上的文字可以使用value值填入；</span></p> <p><span style="font-size: 18px">reset是复位按钮，可以把表单内的选项全部清除复位，按钮上的文字可以使用value值填入；</span></p> <pre class="brush:html;gutter:true;"> <tr height="40" valign="middle"> <td align="right"></td> <td> <input type="submit" name="tijiao" size="25" value="提交"/> <input type="button" name="anniu" size="25" value="按钮"/> <input type="reset" name="chongzhi" size="25" value="重置"/> </td> </tr> </pre> <p><span style="font-size: 18px"></span></p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid12880-0.html' class='tagbtn' target='_blank'>HTML学习</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-537045.html">HTML学习笔记03</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-284252.html">HTML学习笔记</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-201652.html">html学习笔记-上</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-74538.html">html学习</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>