HTML(下)

目录

• HTML(下)
  • form表单
    • 表单功能
    • 表单属性
    • 输入标签(文本框)(内联标签)
      • 标签属性
        • type属性值速记
        • 多种按钮举例
    • 下拉列表标签(内联标签)
      • 标签属性
      • 标签属性
    • 标签：多行文本输入框（内联标签）
      • 属性
    • 标签（内联标签）
    • 表单的语义化

HTML(下)

form表单

表单功能

用于向服务器传输数据，从而实现与web服务器的交互

包含input系列标签，eg：文本字段，复选框，单选框，提交按钮等

还可以包含textarea、select、fieldset和lable标签

表单属性

属性	描述
accept-charset	规定在被提交的表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）提交页面
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded)
method	规定在提交表单时所用的HTTP方法（默认：GET）
name	规定识别表单的名称
novalidate	规定浏览器不验证表单
target	规定action属性中地址的目标（默认：_self)

<input>输入标签(文本框)(内联标签)

<input>元素会根据不同的type属性，变化为多种形态。

你需要先看一看上面的这一段代码你能看的懂吗，里面的属性你是否又了解，不了解那就对了，你可以在下面的属性值中找找这些属性到底是干什么的。

  <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>

标签属性

1）type="属性值"：文本类型。属性值可以是：

• text（默认）

• password：密码类型

• radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
  
  ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

• checkbox：多选按钮，名字相同的按钮作为一组进行选择。

• checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。

• hidden：隐藏框，在表单中包含不希望用户看见的信息

• button：普通按钮，结合js代码进行使用。

• submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。

• reset：重置按钮，清空当前表单的内容，并设置为最初的默认值

• image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。

• file：文件选择框。
  
  提示：

  ​ 如果要限制上传文件的类型，需要配合JS来实现验证。

  ​ 对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

2）value="内容"：文本框里的默认内容（已经被填好了的）

3）size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。

注意size属性值的单位不是像素哦。

4）readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。

用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。

5）disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

type属性值速记

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框（不显示明文）	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" name='x' />
radio	单选框	<input type="radio" name='x' />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" /> 页面不会刷新，将所有输入的内容清空
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

多种按钮举例

<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>

<select>下拉列表标签(内联标签)

<select>标签里面的每一项用<option>表示。

select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

<select>标签属性

• multiple：可以对下拉列表中的选项进行多选。没有属性值。
• size="2"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<form>
    <select multiple="2">
        <!--multiple="2"表示可以选两个-->
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
    </select>

     <select size="2">
        <!--滚动视图，我们可以自己写一写看看效果-->
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
    </select>
</form>

<option>标签属性

• selected：预选中。没有属性值。

<form>
    <select multiple="2" size="2">
        <option>小学</option>
        <option>初中</option>
        <option selected="">高中</option>
        <!--你在没有选之前，他会给你预先选一个，但是你可以更改-->
    </select>
</form>

<textarea>标签：多行文本输入框（内联标签）

text就是“文本”，area就是“区域”。这样你应该懂了吧！

属性

• value：提交给服务器的值。
• rows="4"：指定文本区域的行数。
• cols="20"：指定文本区域的列数。
• readonly：只读。

<form>
    <textarea cols="8" rows="5" readonly="">我是个小可爱</textarea>
</form>

<label>标签（内联标签）

我们先看一段代码

<form action="">
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</form>

上面一段代码会给我们显示一个选择性别的表单，我们会发现之后我们点击小圆点的时候，相应的性别才会被选中，如果单纯的点击文字（男或女）的时候并没有什么卵用，我们现在很想点击文字（男或女）的时候让他也能够选择，所以我们的<label>标签就起了作用，他就像是一滴蜂蜜，把小圆点和文字黏在一起，让我们无论点击小圆点还是文字都会选中相应的性别

本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。

解决方法如下：

代码承上啊！！！！！！

<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>

上方代码中，input标签要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。

当然了，复选框也有label：（任何表单元素都有label）

继续送上我的代码!!!!

<form action="">
    <input type="checkbox" id="c1"><label for="c1">记住密码</label>
</form>

表单的语义化

我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。

<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">
         <!--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>