008 认识HTML form表单

目录

1.表单标签

1、form表单和table表格一样都是组合形式

2.form的属性 有action是数据提交的目的地址
  method方法 数据提交的方式有post get 等等
  enctyoe是数据提交前对输入的数据进行指定的编码格式 unurlencode是默认编码 from-data 是文件提交的编码
  
3 在form表格内 
   input标签是一个输入框，不同的类型的可以是不同的输入方式 
   比如 文本输入 单选 多选 下拉菜单  文本框等 在游览器上被渲染不同的表现形式，每一个input的内容要给定键的名称 name
   
4. 在form表单内 使用p标签进行分割每一行

5.在form表单内确定 提交地址，提交的方式，提交的数据的编码格式，
内容的数据有input属性的不同，
       游览器的渲染形式不同，
       submit提交的数据 在于数据提交的方法和编码格式 urlencoded form-data  plain等多种编码格式

2. 表单域（input 属性的不同展示）

1、type = " text" 文本展示 单行输入

name属性 代表  提交服务端的键 
value属性 代表 提交服务端的值

text类型  提交服务端的值来自用户输入的

value设置输入框的默认值 如果不输入，就是发送默认的值
1.1文本属性:透明提示信息
 placeholder="请输入用户名" 在输入框内显示 透明的提示信息

image-20230210171308153

1.4 文本属性: 默认指定 不可编辑
disabled 不可编辑的功能

 <!--  锁定标签的内容，比如 端口号的固定为22 端口 不允许修改-->
 <input type="text" disabled name="port" value="22"   >
image-20230213153149646
1.5 文本属性: 输入文本优化
    <p>
        <label for="t1">用户名</label>
       <!--   绑定label 标签的话，单击 用户名  输入的光标自动键入到text内， 不需要点击到输入框内  用户体验更加-->
        <input id="t1" type="text" name="user"  placeholder="请输入用户名" >
    </p>


    <p>
        <label for="t2">密码：</label>

        <input id="t2" type="password" name="password" placeholder="请输入密码">
     </p>
image-20230213153636820
1.6 type= "password" 密文展示
name属性 代表  提交服务端的键 
value属性 代表 提交服务端的值

password 类型  提交服务端的值来自用户输入的
1.3 多行文本属性：
<!--     多行文本展示 cols rows 控制文本的长宽。-->
    <div>
        个人简介
    </div>
    <p>
        <textarea name=""  cols="30" rows="10" ></textarea>
    </p>
image-20230213154151274

5 、type="checkbox" 复选框

代表一个键有多个值，相当于列表的形式，比如 爱好有抽烟喝酒烫头 
name属性 代表  提交服务端的键 
value属性 代表 提交服务端的值

checkbox类型 需要name属性和value属性的值，作为一个键值对，
又因为是多选框，键可以对应多个值 ， 键可以是相同。
显示给用户看的数据应该和 value属性的值 保持意义一致。

用户勾选可以理解为给列表添加了一个value

选中三个选项，相当于为k3这个键 添加了3个值 分别是chouyan  hejiu  tangtou

不建议使用不同的键名

image-20230210162749276

默认选中
<input type="checkbox" checked="checked" name="k3"  value="chouyan">抽烟  
checked="checked" 默认选中的意思
简写 checked

image-20230210163312628

6、type="radio" 单选框的样式

代表 一个键一个值
显示给用户看的数据应该和 value属性的值 保持意义一致。
name属性 代表  提交服务端的键 
value属性 代表 提交服务端的值

image-20230210165312707

7、type="date" 日期的样式

image-20230210171002108

8、select 属性 下拉菜单 默认单选

image-20230210174013223

http://127.0.0.1:8080/?k1=&k2=&k3=chouyan&k3=hejiu&gender=male&date=&province=beijing
属性 size 默认显示4个选项
image-20230210173843659
属性 selectd 默认选择

image-20230210174627457

属性 multiple属性 设置成多选菜单
在多级权限配置中 涉及到多选操作。

image-20230210174336201

二级菜单标识

image-20230210175205095

3、表单按钮

1、type= "submit" 触发提交事件

submit 默认显示的名称是 提交，可以通过 value = “登录”   进行自定义 ，用于显示给用户看的值
image-20230210155243379 
游览器地址栏中请求的数据直接显示地址栏 get请求不安全
http://127.0.0.1:8080/?k1=admin&k2=123456
1、type= "submit" 自定义名称
2、请求方式更换成 post
image-20230210155909348

3、type= ”reset“ 重置标签

绑定了重置表单域的功能。

    <input type="reset" >
    <!--    默认的value 是重置-->
    <input type="reset" value="重新录入">

4、type = “botton” 不触发任何事件 js中会用到

<input type="button" value="复位">
<!--    是没有绑定任何时间的按钮 -->

5、标签button

表单域内的 submit 和 button 功能相同
表单域外的 button 不触发任何事件

<form action="127.0.0.1::80" enctype="multipart/form-data" method="get" >

    <p>
        表单域内姓名：<input type="text" >
    </p>
    <button>表单域内提交按钮</button>
</form>

    <p>
        表单域外 姓名：<input type="text" >
    </p>
    <button>表单域外 提交按钮</button>
image-20230213154625480
posted @ 2023-02-10 18:08  mmszxc  阅读(81)  评论(0)    收藏  举报