(前端基础)HTML(二)

发布于:2025-02-18 ⋅ 阅读:(135) ⋅ 点赞:(0)

表单post和get提交

常用于登录和注册.

  • 表单标签:form
    • 属性action:表单提交的位置,可以是网站,也可以是一个请求处理地址
    • 属性method属性值有post、get
      • 属性值post:在url中看不见提交信息,比较安全可以传输大文件
      • 属性值get:在url中我们可以看见我们提交的信息,不安全,但是高效
  •  文本输入框标签:input
    • 属性type:输入的类型(文本:text、密码:password、提交:submit、重置:reset
    • 属性name:文本框名字

表单元素格式(详细版):

属性 说明
type 指定元素的类型。text(文本框)、password(密码框)、checkbox(多选框)radio(单选框)submit(提交按钮)、reset(重置按钮)、file、hidden(隐藏)、image(图片按钮)、button(按钮)。默认text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength type为text或password时,输入的最大字符数
checked type为radio或checkbos时,指定按钮是否是被选中

value、maxlength、size的使用

单选框radio的使用

radio使用时,name需要为一组,同时,可用checked实现默认选中,该处未使用。

 name不同组:

按钮和多选框的使用 

多选框checkbox:可用checked默认选中

 按钮button与图片按钮image:

综上:已出现的按钮为

input type=“button”    vaule=“按钮显示内容”    //普通按钮

input type=“image”   src=“图片路径”     //图片按钮

input type=“submit”   vaule=“按钮显示内容”     //提交按钮

input type=“reset”    vaule=“按钮显示内容”    //重置按钮

列表框文本域和文件域

 下拉框select标签

<select name="列表名称" >
    <option value="选项值">选项1</option>
    <option value="选项值" selected>选项2</option>        //selected:默认选项在2
    <option value="选项值">选项3</option>
</select>

 案例:用selected默认选中上海

 文本域textarea标签

<textarea name="文本域名"  cols="列" rows="行">文本内容</textarea>

 

 文件域input标签

input标签中,type=file

<p>
        文件域:
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

 搜索框滑块和简单验证

使用input标签,当type未email时,会进行简单验证:

邮箱验证:type=email

邮箱:
        <input type="email" name="email">

url验证:type=url

 url:
        <input type="url" name="url">

 

数字验证:type=number

max:最大值

min:最小值

step:每个数字间隔10

数字验证:
        <input type="number" name="num" max="100" min="0" step="10" >

 

音量滑块:type=range

min:最小值

max:最大值

step:每次变化2

 

搜索框:type=search

<p>
        搜索框:
        <input type="search" name="search">
    </p>

表单的应用

  • 隐藏域:hidden

  • 只读:readonly

  • 禁用:disabled

 

 

  •  增强鼠标可用性:label标签

(for与id共同使用 )

 表单初级验证

进行表单验证:保证数据的安全,减少请求数量

表单验证常用方式:

  • placeholder:提示信息,可用于所有文本框

  • required:非空判断,可用于所有文本框

  • pattern:正则表达式

 


网站公告

今日签到

点亮在社区的每一天
去签到