Web前端-Html4--form表单

最新推荐文章于 2021-11-09 21:18:12 发布

yanghainan0318

最新推荐文章于 2021-11-09 21:18:12 发布

阅读量268

点赞数

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/yanghainan0318/article/details/103270509

版权

web前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

表单

页面上的输入框按钮单选多选这些可操作或者可编辑的控件
都输入表单元素

表单的作用:就是负责采集用户的信息作为数据收集

表单里面包含哪些:

表单控件:
输入框密码框单选多选多行文本按钮图片按钮下拉框...

提示信息:
用来提示用户的一些操作流程的步骤的文字展示

表单域:
form表单标签所有的表单控件和提示信息都要放到表单域的标签里面
表单域本身可以实现信息数据的收集与提交

表单域(form):

输入框:

<input type="text"> type为text的表示是输入框

<input type="button"> 表示按钮 value="按钮的文字"

<form action="">

        <input type="text">
        <br>
        <input type="button" value="我是按钮">


 </form>

form表单域:

action: form表单提交的后台地址
method: 提交方式 get或者post(放到后面知识点去讲)
get方式表单域不写是默认值

表单域本身能够将数据提交给action所指向的后台地址

表单域里面一旦有提交按钮那么点击提交按钮时会把当前表单域的所有数据
提交给action指向的后台地址

<input type="submit"> 提交按钮 value="修改提交按钮的默认文字(提交)"

一旦表单域里面的控件具有name属性那么的值是自己起的名字
那么当前表单域提交时就会把当前具有name的控件信息提交给后台
如果是get方式那么就会在地址栏体现出来
格式:
action地址?键1=值1&键2=值2&...键n=值n

控件有name就提交没有name就不提交

如果是post方式那么提交的数据不在地址栏(至于在哪后面去讲)

<form action="http://www.baidu.com">
    <input type="text" name="username">
    <br>
    <input type="text" name="password">
    <br>
    <input type="submit" value="注册">

 </form>

常见的表单控件使用:

输入框:
input:type="text"
属性:
value="" 输入框的默认输入内容(以后用户输入的也是在这里面)
那么name是表单提交时的键 value是表单提交时的值

placeholder="" 输入框提示信息

size="" 输入框的宽度

readonly 表示内容不可以编辑只读 (但是提交时会被提交)

disabled 表示内容不可用 (也不会被提交)
密码框:
input:type="password"
属性跟上面输入框一毛一样!!!!!

单选框:
input:type="radio"
实现单选的方式: 同一个name值的单选框实现单选
单选的value值是用来提交的而外面显示的文字是给用户看的

选谁提交谁不选则不提交

属性:
checked 默认选中

多选框:
input:type="checkbox"

checked 默认选中

<form action="http://www.baidu.com">
<!-- value="我是内容" -->
    <input type="text" disabled size="60" name="username" placeholder="请输入手机号" value="我是内容">
    <br>
    <input type="password" name="password">
    <br>
    <input type="radio" checked name="gender" value="man">男
    <input type="radio" name="gender" value="woman">女
    <input type="radio" checked name="country" value="China">中国
    <input type="radio" name="country" value="USA">美国
    <br>
    <input type="checkbox" name="hobby" checked value="football">足球
    <input type="checkbox" name="hobby" value="blueball">蓝球
    <input type="checkbox" name="hobby" value="earthball">地球

    <br>
    <input type="checkbox" name="fruit" checked value="apple">苹果
    <input type="checkbox" name="fruit" value="bunana">香蕉
    <input type="checkbox" name="fruit" value="orange">橙子
     <p>
        <input type="submit">
        
     </p>
</form>

下拉框 (下拉菜单)
选择哪一个option 就提交哪一个

selected 默认显示的条目

<select name="city" >
       <option value="beijing">北京</option>
       <option value="sanhe">三河</option>
       <option selected value="yanjiao">燕郊</option>
       <option value="fangshan">房山</option>
       
   </select>

多选菜单:
在select下拉菜单基础上添加一个 multiple

<select name="fruit" multiple>
       <option value="apple">苹果</option>
       <option value="orange">橙子</option>
       <option value="banana">香蕉</option>
       <option value="yingtao">樱桃</option>
   </select>

多行文本框
textarea

placeholder="请输入你的描述"

cols="30" 多少列
rows="10" 多少行

 <textarea name="mtext"  cols="30" rows="10">嘿嘿
  
  </textarea>

专门用来显示提示信息的
以后可以通过css改变文字样式

其实label有一个非常好用的功能:
跟输入框绑定
label的for如果关联一个input的id
那么点击label时输入框也会获得焦点可以输入

提交按钮:
input:type="submit"
专门放在form表单里面用来点击提交表单数据的按钮

普通按钮:
input:type="button"
专门用来结合JavaScript 实现点击效果的
现在没学JavaScript 所以现阶段就是按着玩没啥作用

重置按钮
input:type="reset"
把当前表单的所有控件的值回归到初始值

<label for="mobile">在此输入手机号</label>
  <input type="text" id="mobile" value="哈哈,我是默认值">


    <p>
        <input type="submit">

    </p>
    <p>
        <input type="button" value="按着玩">
    </p>
    <p>
        <input type="reset">
    </p>

form剩余控件

<form action="http://www.baidu.com">


<p>
    <input type="text" name="username">

</p>
<p>
    <!-- 用户看不见 用来传输一些不需要用户操作的数据 -->
    <input type="hidden" name="time" value="2019-11-29 15:16:24">
</p>

<p>
    <input type="submit" value="注册">
</p>
<!-- 以图片为提交按钮  具有提交功能-->
<p>
    <input type="image" src="33.gif">
</p>
<!-- 文件域 -->
<p>
    <input type="file" name="file">

</p>

<p>
        <!-- 默认具有提交功能的按钮 -->
    <button>我也是提交按钮</button>
    <!-- 重置功能的按钮 -->
    <button type="reset">我是重置按钮</button>
    <!-- 按着玩的按钮(后面结合js使用的) -->
    <button type="button">我是按着玩的</button>
    <!-- type默认是submit -->
    <button type="submit">我是不写type默认就是提交的按钮</button>

</p>



</form>

关于文件上传的配置:

第一步:
把form表单的method改成post
因为get上传实在地址栏根本无法完成上传(文件太大)

第二步:
把form表单的默认提交方式从原来的字符串变成二进制流的方式提交

form表单的ecntype属性默认是
application/x-www-form-urlencoded(默认地址栏的字符串上传)

需要改成:
multipart/form-data(多部分 form表单数据流的方式)

<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
 <p>
    <input type="file" name="file">
</p>
<button>上传</button>

表单分组:

把表单里面时同一块内容的分到一个组里面
让表单的结构内容更清晰

fieldset(分组) legend(分组的名字)

<form action="#">
   <fieldset>
        <legend>手机号注册方式</legend>

         <p>
            <label for="mobile">输入手机号</label>
            <input type="text" id="mobile" name="mobile">
        </p>
        <p>
            <button>手机号注册</button>
        </p>



   </fieldset>


    <fieldset>
        <legend>邮箱注册方式</legend>
        <p>
            <label for="email">输入邮箱</label>
            <input type="text" id="email" name="email">
        </p>
        <p>
            <button>邮箱注册</button>
        </p>



    </fieldset>



</form>