Web前端速成(Html+Css+JavaScript+jQuery)-15.表单(Forms)

乐地课堂

已于 2023-06-11 00:51:19 修改

阅读量115

点赞数

分类专栏：前端开发文章标签： javascript 前端 html css jquery

于 2023-05-14 16:16:30 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/130667852

版权

前端开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

内容摘要：
- 介绍表单Forms 的属性和使用方法。

15.表单(Forms)

知识点：

HTML 表单是文档中的一个区域，相当于一个容器，此区域包含表单元素和表单提示信息。
表单元素是允许用户在表单中输入内容，表单将用户输入的信息发送到 Web 服务器。
表单元素比如：input 元素、复选框（checkbox）、单选框（radio-buttons）、文本域（textarea）、下拉列表（select）等等。
如果不定义表单域，表单中的数据就无法传送到后台服务器。
结构图如下：

<form> 属性的列表

属性	值	描述
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码。
method	get post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
rel	external help license next nofollow noopener noreferrer opener prev search	规定链接资源和当前文档之间的关系。
target	_blank _self _parent _top framename	规定在何处打开 action URL。

属性运用案例

<!DOCTYPE html>
<html>
<body>
    <form action="test.php" method="GET">
        <h4>这是一个基础的使用的案例</h4>
        First name:<input type="text" name="firstname" value="Mickey">
        <br>
        Last  name:<input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
        点submit 数据会被发往服务器的test.aspx页面
    </form> 

    <form action="test.php" method="GET" target="_blank" accept-charset="UTF-8"
        ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
        <h4>这是一个已设置所有可能的属性的使用案例</h4>
        First name:<input type="text" name="firstname" value="Mickey">
        <br>
        Last  name:<input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
        点submit 数据会被发往服务器的test.aspx页面
    </form> 
</body>
</html>

表单标签

标签	描述
<form>	供用户输入的表单
<input>	输入域或按钮,type 属性值有 text,password,radio,Checkboxes,Submit
<textarea>	文本域 (一个多行的输入控件)
<label>	文字标题
<fieldset>	一组相关的表单元素，并使用外框包含起来
<legend>	<fieldset> 元素的标题
<select>	下拉选项列表
<optgroup>	下拉列表选项组
<option>	下拉列表中的选项
<button>	一个点击按钮
<datalist>	一个预先定义的输入控件选项列表
<output>	一个计算结果

表单标签运用实例

<!DOCTYPE html>
<html>
<body>

    <form id="inputForm">
        <h4> input使用案例，type值不同，用途不同</h4>
        
        文字:<input type="text" name="tname" value="">
            <br>
        密码:<input type="password" name="lastname" value="">
            <br>
        单选框:<input type="radio" name="sex" value="male">男
              <input type="radio" name="sex" value="female">女
              <br>
        复选框<input type="checkbox" name="vehicle" value="Bike">自行车
              <input type="checkbox" name="vehicle" value="Car">小汽车
              <br>        
        提交按钮   <input type="submit" value="Submit">  <br><br>
        点submit 数据会被发往服务器的test.aspx页面
    </form> 

    <form id="textareaForm">
        <h4> textarea使用案例</h4>          
        <textarea rows="10" cols="30">
            我是一个文本框。
        </textarea>
    </form> 

    <form id="labelForm">
        <h4> label使用案例</h4> 
        <label for="name">文字:</label>  
        <input type="text" name="name" value="请输入。。。"> 
    </form> 

    <form id="fieldsetForm" action="/test.aspx"  target="_blank" method="get" autocomplete="on" novalidate>
        <h4> fieldset和legend使用案例</h4>  
        <fieldset>
          <legend>Personal information:</legend>
          Name:<br>
          <input type="text" name="name" value="">
          <br>
          Password:<br>
          <input type="password" name="password" value="">
          <br><br>
          <input type="submit" value="Submit">
        </fieldset> 
    </form> 

    <form id="selectForm" action="/test.aspx"  target="_blank" method="get" autocomplete="on" novalidate>
        <h4> select和option使用案例</h4>

        <p>无预设值</p>          
        <select name="city">
          <option value="0">广州</option>
          <option value="1">上海</option>
          <option value="2">北京</option>
          <option value="3">深圳</option>
        </select>

        <p>有预设值</p> 
        <select name="cars">
         <option value="0">广州</option>
          <option value="1">上海</option>
          <option value="2" selected>北京</option>
          <option value="3">深圳</option>
        </select>
    </form> 

    <form id="optgroupForm" action="/test.aspx"  target="_blank" method="get" autocomplete="on" novalidate>
        <h4>select， optgroup，option组合使用案例</h4>  
        <select>
          <optgroup label="蔬菜类">
            <option value="白菜">白菜</option>
            <option value="包菜">包菜</option>
          </optgroup>
          <optgroup label="肉类">
            <option value="猪肉">猪肉</option>
            <option value="鱼">鱼</option>
          </optgroup>
        </select>

        <h4>optgroup，option组合使用案例</h4>
       <optgroup label="蔬菜类">
            <option value="白菜">白菜</option>
            <option value="包菜">包菜</option>
        </optgroup>
        <optgroup label="肉类">
          <option value="猪肉">猪肉</option>
          <option value="鱼">鱼</option>
        </optgroup>
        
    </form> 

    <form id="buttonForm" action="/test.aspx"  target="_blank" method="get" autocomplete="on" novalidate>
        <h4> button使用案例</h4>          
        <button type="button">提交</button>
    </form> 

    <form id="datalistForm" action="/test.aspx"  target="_blank" method="get" autocomplete="on" novalidate>
        <h4> datalist使用案例</h4>  
        <input list="citys" name="city">
        <datalist id="citys">              
          <option value="0">广州</option>
          <option value="1">上海</option>
          <option value="2">北京</option>
          <option value="3">深圳</option>
        </datalist>
        <input type="submit">        
        
    </form> 

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
     <h4> output使用案例</h4>   
      0<input type="range" id="a" value="50">100
      +<input type="number" id="b" value="50">
      =<output name="x" for="a b"></output>
      <p><strong>注意:</strong> Edge 12及更早 IE 版本的浏览器不支持 output 元素。</p>      
        
    </form> 

</body>
</html>