HTML(下)

HTML(下)
- form表单
- 标签：多行文本输入框（内联标签）</a><ul><li><a href="#属性">属性</a></li></ul></li><li><a href="#label标签（内联标签）"><label>标签（内联标签）</a></li><li><a href="#表单的语义化">表单的语义化</a></li></ul></li></ul></li></ul></div></p> <h1 id="html下">HTML(下)</h1> <h2 id="form表单">form表单</h2> <h3 id="表单功能">表单功能</h3> <p>用于向服务器传输数据，从而实现与web服务器的交互</p> <p>包含input系列标签，eg：文本字段，复选框，单选框，提交按钮等</p> <p>还可以包含textarea、select、fieldset和lable标签</p> <h3 id="表单属性">表单属性</h3> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>accept-charset</td> <td>规定在被提交的表单中使用的字符集（默认：页面字符集）</td> </tr> <tr> <td>action</td> <td>规定向何处提交表单的地址（URL）提交页面</td> </tr> <tr> <td>autocomplete</td> <td>规定浏览器应该自动完成表单（默认：开启）</td> </tr> <tr> <td>enctype</td> <td>规定被提交数据的编码（默认：url-encoded)</td> </tr> <tr> <td>method</td> <td>规定在提交表单时所用的HTTP方法（默认：GET）</td> </tr> <tr> <td>name</td> <td>规定识别表单的名称</td> </tr> <tr> <td>novalidate</td> <td>规定浏览器不验证表单</td> </tr> <tr> <td>target</td> <td>规定action属性中地址的目标（默认：_self)</td> </tr> </tbody> </table> <h3 id="input输入标签文本框内联标签"><code><input></code>输入标签(文本框)(内联标签)</h3> <p><code><input></code>元素会根据不同的<code>type</code>属性，变化为多种形态。</p> <p>你需要先看一看上面的这一段代码你能看的懂吗，里面的属性你是否又了解，不了解那就对了，你可以在下面的属性值中找找这些属性到底是干什么的。</p> <pre><code class="language-html"> <form> 姓名：<input value="呵呵" >逗比<br> 昵称：<input value="哈哈" readonly=""><br> 名字：<input type="text" value="name" disabled=""><br> 密码：<input type="password" value="pwd" size="50"><br> 性别：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 </form> </code></pre> <h4 id="标签属性">标签属性</h4> <p>1）<code>type="属性值"</code>：<strong>文本类型</strong>。属性值可以是：</p> <ul> <li> <p><code>text</code>（<strong>默认</strong>）</p> </li> <li> <p><code>password</code>：<strong>密码</strong>类型</p> </li> <li> <p><code>radio</code>：<strong>单选</strong>按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。<br> ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。</p> </li> <li> <p><code>checkbox</code>：<strong>多选</strong>按钮，名字相同的按钮作为一组进行选择。</p> </li> <li> <p><code>checked</code>：将单选按钮或多选按钮默认处于<strong>选中状态</strong>。当<code><input></code>标签的<code>type="radio"</code>时，可以用这个属性。属性值也是checked，可以省略。</p> </li> <li> <p><code>hidden</code>：<strong>隐藏</strong>框，在表单中包含不希望用户看见的信息</p> </li> <li> <p><code>button</code>：<strong>普通</strong>按钮，结合js代码进行使用。</p> </li> <li> <p><code>submit</code>：<strong>提交</strong>按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。</p> </li> <li> <p><code>reset</code>：<strong>重置</strong>按钮，清空当前表单的内容，并设置为最初的默认值</p> </li> <li> <p><code>image</code>：<strong>图片</strong>按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。</p> </li> <li> <p><code>file</code>：<strong>文件</strong>选择框。<br> 提示：</p> <p> 如果要限制上传文件的类型，需要配合JS来实现验证。</p> <p> 对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。</p> </li> </ul> <p>2）<code>value="内容"</code>：文本框里的默认内容（已经被填好了的）</p> <p>3）<code>size="50"</code>：表示文本框内可以显示<strong>五十个字符</strong>。一个英文或一个中文都算一个字符。<br> 注意<strong>size属性值的单位不是像素哦</strong>。</p> <p>4）<code>readonly</code>：文本框<strong>只读</strong>，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。<br> 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。</p> <p>5）<code>disabled</code>：文本框<strong>只读</strong>，不能编辑，光标点不进去。属性值可以不写。</p> <h5 id="type属性值速记">type属性值速记</h5> <table> <thead> <tr> <th style="text-align:center">type属性值</th> <th style="text-align:center">表现形式</th> <th>对应代码</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">text</td> <td style="text-align:center">单行输入文本</td> <td><code><input type=text" /></code></td> </tr> <tr> <td style="text-align:center">password</td> <td style="text-align:center">密码输入框（不显示明文）</td> <td><code><input type="password" /></code></td> </tr> <tr> <td style="text-align:center">date</td> <td style="text-align:center">日期输入框</td> <td><code><input type="date" /></code></td> </tr> <tr> <td style="text-align:center">checkbox</td> <td style="text-align:center">复选框</td> <td><code><input type="checkbox" checked="checked" name='x' /></code></td> </tr> <tr> <td style="text-align:center">radio</td> <td style="text-align:center">单选框</td> <td><code><input type="radio" name='x' /></code></td> </tr> <tr> <td style="text-align:center">submit</td> <td style="text-align:center">提交按钮</td> <td><code><input type="submit" value="提交" /></code></td> </tr> <tr> <td style="text-align:center">reset</td> <td style="text-align:center">重置按钮</td> <td><code><input type="reset" value="重置" /> </code> 页面不会刷新，将所有输入的内容清空</td> </tr> <tr> <td style="text-align:center">button</td> <td style="text-align:center">普通按钮</td> <td><code><input type="button" value="普通按钮" /></code></td> </tr> <tr> <td style="text-align:center">hidden</td> <td style="text-align:center">隐藏输入框</td> <td><code><input type="hidden" /></code></td> </tr> <tr> <td style="text-align:center">file</td> <td style="text-align:center">文本选择框</td> <td><code><input type="file" /> </code></td> </tr> </tbody> </table> <h5 id="多种按钮举例">多种按钮举例</h5> <pre><code class="language-html"><form> <input type="button" value="我是一个普通按钮"> <br> <input type="submit" value="我是一个提交按钮"> <br> <input type="reset" value="我是一个重置按钮"> <br> <input type="image" src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg"> <br> <input type="file" value="我是一个文本选择框"> </form> </code></pre> <h3 id="select下拉列表标签内联标签"><code><select></code>下拉列表标签(内联标签)</h3> <p><code><select></code>标签里面的每一项用<code><option></code>表示。</p> <p>select就是“选择”，option“选项”。</p> <p>select标签和ul、ol、dl一样，都是组标签。</p> <h4 id="select标签属性"><code><select></code>标签属性</h4> <ul> <li><code>multiple</code>：可以对下拉列表中的选项进行多选。没有属性值。</li> <li><code>size="2"</code>：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。</li> </ul> <pre><code class="language-html"><form> <select multiple="2">  <option>小学</option> <option>初中</option> <option>高中</option> </select> <select size="2">  <option>小学</option> <option>初中</option> <option>高中</option> </select> </form> </code></pre> <h4 id="option标签属性"><code><option></code>标签属性</h4> <ul> <li><code>selected</code>：预选中。没有属性值。</li> </ul> <pre><code class="language-html"><form> <select multiple="2" size="2"> <option>小学</option> <option>初中</option> <option selected="">高中</option>  </select> </form> </code></pre> <h3 id="textarea标签：多行文本输入框（内联标签）"><code><textarea></code>标签：多行文本输入框（内联标签）</h3> <p>text就是“文本”，area就是“区域”。这样你应该懂了吧！</p> <h4 id="属性">属性</h4> <ul> <li><code>value</code>：提交给服务器的值。</li> <li><code>rows="4"</code>：指定文本区域的行数。</li> <li><code>cols="20"</code>：指定文本区域的列数。</li> <li><code>readonly</code>：只读。</li> </ul> <pre><code class="language-html"><form> <textarea cols="8" rows="5" readonly="">我是个小可爱</textarea> </form> </code></pre> <h3 id="label标签（内联标签）"><code><label></code>标签（内联标签）</h3> <p>我们先看一段代码</p> <pre><code class="language-html"><form action=""> <input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女 </form> </code></pre> <p>上面一段代码会给我们显示一个选择性别的表单，我们会发现之后我们点击小圆点的时候，相应的性别才会被选中，如果单纯的点击文字（男或女）的时候并没有什么卵用，我们现在很想点击文字（男或女）的时候让他也能够选择，所以我们的<code><label></code>标签就起了作用，他就像是一滴蜂蜜，把小圆点和文字黏在一起，让我们无论点击小圆点还是文字都会选中相应的性别</p> <p>本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。</p> <p>解决方法如下：</p> <p>代码承上啊！！！！！！</p> <pre><code class="language-html"><form action=""> <input type="radio" name="gender" id="f1"/><label for="f1">男</label> <input type="radio" name="gender" id="f2"/><label for="f2">女</label> </form> </code></pre> <p>上方代码中，input标签要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。</p> <p>当然了，复选框也有label：（任何表单元素都有label）</p> <p>继续送上我的代码!!!!</p> <pre><code class="language-html"><form action=""> <input type="checkbox" id="c1"><label for="c1">记住密码</label> </form> </code></pre> <h3 id="表单的语义化">表单的语义化</h3> <p>我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。</p> <pre><code class="language-html"><form> <fieldset> <legend>必填信息</legend> 姓名：<input value="呵呵">逗比 <br> 昵称：<input value="哈哈哈说的就是你" readonly=""> <br> 名字：<input type="text" value="name" disabled=""> <br> 密码：<input type="password" value="pwd" size="50"> <br> 性别：<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女邮箱：<input type="email" name="user_email">  </fieldset> <fieldset> <legend>其他信息</legend> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="buy">买买买 </fieldset> </form> </code></pre>