前端表单交互

Posted 2021-03-21

应用场景 登录、注册 、举报投诉、发表意见建议

input表单type属性值（常用的8种）

html4
type = "text" 单行文本输入
type = "password" 密码 （maxlength=""）
type = "radio" 单项选择 （checked="checked"）
type = "checkbox "多项选择"
type = "button" 按钮
type = "submit" 提交
type = "file" 上传文件
type = "reset" 重置

HTML5智能表单
type = "email" 限制用户输入必须为Email类型
type = "url" 限制用户输入必须为url类型
type = "date" 限制用户输入必须为日期类型
type = "datetime" 显示完整日期含时区
type ="date-local" 显示完整日期不含时区
type = ‘time" 限制用户输入必须为时间类型
type = "month" 限制用户输入必须为月类型
type = "week" 限制用户输入必须为周类型
type = "number" 限制用户输入必须为数字类型
type ="range" 生成一个滑动条
type = "search"具有搜索意义的表单 results = "n"属性
type = "color" 生成一个颜色选择表单
type = "tel" 显示电话号码

HTML5新增表单属性
require 内容不能为空
placeholder 表单提示信息
autofocus 自动聚焦
pattern 正则表达式 输入的内容必须匹配到指定正则范围
autocomplete 是否自动保存用户输入值 默认为on
formaction 在submit里定义提交地址
datalist 输入框选择列表配合list使用 list值为datalist的id值
output 计算或脚本输出

form标签五大属性 action method target name enctype(编码方式）
label标签为input标签定义标注 for属性指向关联的input的id属性
radio在一起 要求name值必须一样 才是一组单选按钮 并且必须加value值才能被后台获取
checkbox也必须要求name值一样 选择多个 后台通过
if(is_array($_GET["food"]) && !empty($_GET["food"])){
foreach($_GET["food"] as $value){ //循环获取数组里面的值然后输出
echo $value
}
}
判断是否为数组 并且不为空

按钮标签常用来触发js代码
<button></button>默认是提交按钮 <button type="submit"></button>
以上两个button 如果在form表单里面用input
如果在非form表单里面用<button></button>
file 上传文件 multiple 上传多个文件
hidden 隐藏 后台用来监控点击按钮点了多少次 点击图片点了多少次
后台通过input的name属性获取数据$_GET["username"]