08-表单

本节案例

image.png

表单的作用

HTML 表单用于收集用户输入。

表单form

<form> 元素定义 HTML 表单，里面需要有各种表单元素
实例：

<form action="login.php" method="post">
      姓名: <input type="text" name="name" value="Mickey" placeholder="请输入用户名">
      <br>
      密码: <input type="password" name="password" value="Mouse">
      <br><br>
     <input type="submit" value="登录">
 </form> 
 <p>如果您点击提交，表单数据会被发送到名为login.php的页面。</p>

image.png

代码解析：

• form里面需要各种表单元素，如<input>、<textarea>等。form常见属性与属性值有:
  • method：方法，用于规定在提交表单时所用的 HTTP 方法。 method = get（默认） | post |…… , 字面意思用于获取和传输。当然，他们还有很多其它的差别，当您使用 get时，表单数据在页面地址栏中是可见的，如表单提交是被动的（比如搜索引擎查询），并且没有敏感信息可以用get。post的安全性更好，因为在页面地址栏中被提交的数据是不可见的。如果表单正在更新数据，或者包含敏感信息（例如密码）可以用post。
  • action：动作，用于规定提交表单的目的地。如action="banzhang.php"则将表单提交给banzhang.php来处理，如果值为空，则默认是本页。
  • 其它属性：enctype（编码方式）、target（目标打开方式）等等。
• input是最常见的表单元素，可以提供用户一个输入界面。<input> 元素根据不同的 type 属性，可以变化为多种形态。常见属性与属性值有:
  • type = text (默认) | password | radio | checkbox | file | image | hidden ，分别表示：文本框（默认）| 密码 | 单选 | 复选 | 文件框 | 图像域 | 隐藏域
  • name ，表单元素的名字，通常是必备属性。
  • value ，表单元素的值，通常根据需求来决定表单元素内是否有value属性和对应的值。
  • placeholder ，表单元素占位符，当表单元素value为空时显示其值，不为空时隐藏其值。是一个html5新增属性。
  • tabindex ，设置访问者在页面中按tab键的顺序。 在没有定义属性值的时候，tabindex的默认值是0。如果将tabindex设为负值（tabindex=”-1”），这个元素会被排除在tab键切换的范围之外。tabindex不仅可以用于输入框间的切换，也可以用于链接之间的切换。
  • 其它属性：checked（单选复选框默认是否选中）、disabled（不可用，常用于按钮）、maxlength（文本框最大字符数）、size(元素宽度或高度) 、readonly(内容只读) 。

常见表单元素的示例图：

image.png
注意：
1.html5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。同时还新增了按钮的formaction属性，动态的让表单提交到不同的URL。

  <form id="foo" method="post"></form>
  <input name="name"  form="foo" >
  <input type="password" name="password"   form="foo" >
  <input  type="submit" value="注册"  form="foo"   formaction="reg">
  <input  type="submit" value="登录"  form="foo"   formaction="log">

2.html5中新增了type属性值：email、URL、datetime、datetime-local、date、month、week、time、number、range、color 、search、tel等
3.html5中新增属性：

• Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入。属性值： on | off，既可以在form表单上使用，对整张表单的所有控件进行自动完成的开关，也可以在input上使用，对特定输入框进行修改。绝大部分浏览器，默认值是on(开启)。
• Autofocus：自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。
• Form：所属表单。通过form表单的id，确定此input对应哪张表单。
• Required：意为必填。required="required" 设置input必填，否则阻止提交。
• Pattern：使用正则表达式验证input的模式（须了解正则表达式）

<p>正则表单式用法示例：</p>
<form>
    手机号：<input type="text" name="tel" pattern="1[0-9]{10}">
    <input type="submit">   
</form>

需要注意的表单元素用法

单选按钮 radio:

• 同组radio的name属性的值必须相同，此时实现只能单选效果（“互斥”）。
• 为更好的鼠标体验及方便以后的CSS实现，实际中通常使用lable for id的用法。

 性别：
  <input type="radio" id="sex_male" name="sex" value="male">
  <label for="sex_male">男</label>
  <input type="radio" id="sex_female" name="sex" value="female">
  <label for="sex_female">女</label>
  <!--name相同，只能选男或女；有了label for id，文字和表单元素捆在一起，单击文字可以等同于单击表单元素，注所有表单元素都可以通过label绑定-->

复选按钮 radio:

• 同组radio的name属性的值必须相同。
• 为更好的鼠标体验及方便以后的CSS实现，实际中也通常使用label for id的用法。
• 注： label也可显式关联文本，即用label包括input和文本。

爱好：
<input type="checkbox" id="f_basketball" name="favorites" value="basketball">
<label for="f_basketball">篮球</label>
<input type="checkbox" id="f_football" name="favorites" value="football">
<label for="f_football">足球</label>
<label>
      <input type="checkbox" name="favorites" value="volleyball">排球
</label>

其它表单元素

下拉列表select

select元素定义下拉列表，option元素定义待选择的选项。

 <select name="cars" size="4" multiple> <!-- size = 4 表示下拉列表尺寸为4，multiple 表示可多选 -->
   <option value="volvo" selected>Volvo</option>
   <option value="bmw">BMW</option>
   <option value="benz">Benz</option>
   <option value="audi">Audi</option>
 </select>

 <select name="cars" size="4" multiple>
    <optgroup label="IE系列">  <!--  optgroup对下拉列表进行分组 -->
      <option value="Internet Explorer">IE6</option>
      <option value="Internet Explorer">IE7</option>
      <option value="Internet Explorer">IE8</option>
      <option value="Internet Explorer">IE9.0及以上</option>
  </optgroup> 
  <optgroup label="非IE系列">  <!--  optgroup对下拉列表进行分组 -->
     <option value="Firefox">BMW</option>
     <option value="Chrome">BMW</option>
     <option value="Opera">BMW</option>
     <option value="Safari">BMW</option>
  </optgroup> 
</select>

image.png

文本域 textarea

textarea元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30" placeholder="请输入您的留言！">
   您的留言很宝贵！
 </textarea>

按钮button

button 元素定义可点击的按钮。

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

• 在 button 元素内部，可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。
• 二者相比较， <button> 控件提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
• 唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
• 请始终为按钮规定 type 属性：Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

HTML5 表单元素

HTML5 增加了如下表单元素：

• <datalist>
• <keygen>
• <output>

<datalist> 元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。简单的记忆：[input] list for [datalist] id。

<input list="browsers" name="browser">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">

<p><b>注释：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 标签。</p>

当输入内容或点击三角形按钮时会出现提示

image.png

作业：

1.利用表格本节所学的表单知识完成本节开头的表单项目（*必填用required属性）
2.完成如下练习：

注意：html5新增表单元素是用filedset配合legend实现的 image.png
练习2参考代码：

  <form action="Test.html" method="get">
    <fieldset>
        <legend>HTML5新增表单元素</legend>
        <table>
            <tr>
                <td>邮箱</td>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="url" name="url"></td>
            </tr>
            <tr>
                <td>日期</td>
                <td><input type="date" name="data"></td>
            </tr>
            <tr>
                <td>时间</td>
                <td><input type="time" name="time"></td>
            </tr>
            <tr>
                <td>月份</td>
                <td><input type="month" name="month"></td>
            </tr>
            <tr>
                <td>星期</td>
                <td><input type="week" name="week"></td>
            </tr>
            <tr>
                <td>滑动条</td>
                <td><input type="range" name="range"></td>
            </tr>
            <tr>
                <td>颜色</td>
                <td><input type="color" name="color"></td>
            </tr>
            <tr>
                <td><input type="submit"></td>
            </tr>
        </table>
    </fieldset>
</form>