<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML中常用的form表单元素标签</title>
</head>
<body>
<b>for表单域</b>
<form action="https://www.teamczyx.com" method="post" enctype="application/x-www-form-urlencoded">
文本框<input type="text" placeholder="请输入内容" required="required" name="username" class="username"><br>
密码框<input type="password" value="密码框的默认内容" name="password"><br>
单选框<input type="radio" checked name="radio"><br>
选择框<input type="checkbox" checked checked name="checkbox"><br>
上传文件<input type="file" name="file"><br>
限制输入的是邮箱格式<input type="email" value="teamczyx@teamczyx.com" name="email"><br>
限制输入的是数字<input type="number" value="88888" name="number"><br>
日期控件<input type="date" value="2023-01-04" name="date"><br>
月份控件<input type="month" value="2023-01" name="month"><br>
选择第几周<input type="week" value="2023-W01" name="week"><br>
时间控件<input type="time" value="22:50" name="time"><br>
颜色选择<input type="color" value="#000000" name="color"><br>
滑块<input type="range" value="10"name="range"><br>
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</form>
</body>
<style>
.username{
outline:none;
border:none;
border:1px solid #10ce49;
}
</style>
</html>
当form表单域的enctype属性为enctype="application/x-www-form-urlencoded"时，提交格式如下：
请注意：表单中的每一个标签必须有name属性，否则不会提交该标签中的数据。
如果将form表单域的enctype属性改为enctype="multipart/form-data"，提交格式如下：
解释一下form表单域的相关标签：
<form></form> 表单域
常用属性如下：
action="表单提交地址"
method="提交方法get post之类"
enctype="application/x-www-form-urlencoded" 提交的数据格式为name=zhangsan&age=50
enctype="multipart/form-data" 提交的数据中包含图片或文件时定义为该格式
input标签，常用属性如下：
1.type="text"文本框
2.type="password"密码框
3.type="radio"单选框
4.type="checkbox"复选框
5.type="submit"提交按钮
6.type="reset"重置按钮
7.type="file"上传文件
8.type="button"普通按钮
新增input 的type属性
email 限制输入的是邮箱格式
number 数字
date 日期控件
month 月份控件
week 选择第几周
time 时间控件
color 颜色选择
range 滑块
新增input 的标签属性
placeholder="请输入内容"---input的标签属性，设置提示内容
required="required"设置必填项，所属标签必须填写，否则不能提交
autofocus="autofocus"自动获取焦点（自动将光标放入输入框）
input的CSS样式
outline:none;去除input点击后的蓝色边框
border:none;去除input的默认边框
border:1px solid #0077AA;给input加一个自定义的边框
下拉框：
<select>
<option></option>
</select>
文本域： <textarea></textarea>
|
窥视卡
雷达卡
发表于 2023-1-30 20:45:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-15 04:10:18
