html表单元素如何取消默认,HTML表单元素之
定义
input元素是基于Web的表单创建交互式控件，方便接受来自用户的数据。
默认style
行内块元素display: inline-block;
具有边框border属性
获取焦点的时候，默认是通过outline属性进行控制。
重要属性
type：input标签的工作方式由type属性决定。
取值
解释
text
单行文本区域、输入的文本可见【默认值】
password
单行文本区域，输入的文本被遮盖
number
输入数字的控件
radio
单选按钮，多个拥有相同name值的选项中选择一个
checkout
复选框
button
没有默认行为的按钮，按钮中的值显示其value属性的值
file
上传文件
name：input表单控件的名字【没有name属性时，不会一起提交表单】
value：值
size：默认值为20。仅指定一次可以看到多少个字符【与minlength和maxlength区分】。类似控制input的width。
minlength - maxlength：能够接受输入的最小-最大字符数
pattern：验证文本框的正则表达式
placeholder：简短的提示信息
disabled：布尔值。表示控件是否被禁用。【禁用的表单元素不会一起提交】
readonly：布尔值。表示控件是否可以编辑。【只读的表单元素将会一起提交】
required：布尔值。表示此值为必填项或提交前必须检查该值。
案例：
input中type为textusername1:
username2:
username3:
username4:
username5:
username6:
username7:
username8:
username9:
Submit
结果：
input中的常用属性.gif
input中的校验
一些伪类可用于设置表单元素的样式，以帮助用户查看其值是有效还是无效。即:valid(有效)和:invalid(无效)。
input中type为textdiv {
margin-bottom: 10px;
position: relative;
}
input+span {
padding-right: 30px;
}
input:invalid+span:after {
position: absolute;
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
position: absolute;
content: '✓';
padding-left: 5px;
}
Choose a username:
Submit
结果：
input校验.png
使用
type="text"
作用：创建基本的单行输入。
属性：【以上列举的重要属性除外】
pattern：匹配正则表达式【不需要使用required属性就能够影响伪类】
type="password"
作用：作为一行纯文本编辑器控件呈现，其中文本被"(*)"或"(·)"等符号替换。
type=password的基本样式.png
属性：
autocomplete：可以让密码管理器自动输入密码。
取值：on、off、current-password、new-password
inputmode：指定输入模式
取值：text、numeric、tel、url、email
pattern：添加正则表达式的验证。
type="number"
作用：让用户输入一个数字，包含内置样式以拒绝非数字的输入。当此元素获取焦点之后，将会出现步进的箭头，方便用户操作。
type=number的最初样式.png
属性：
step：此属性可以设置步长的值。【可以是整数也可以是小数】
min/max：指定该字段的最大和最小值。
pattern：当type=number的时候，pattern属性将会失效，只需要使用min/max属性来控制即可。
size：此属性将会失效，我们只能通过css的width属性来控制input框的大小。
list：指定该属性来从中进行选择，该列表属性包含的ID作为其值。
案例：list属性
input中type为textdiv {
margin-bottom: 10px;
position: relative;
}
input+span {
padding-right: 30px;
}
input:invalid+span:after {
position: absolute;
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
position: absolute;
content: '✓';
padding-left: 5px;
}
结果：
a和list属性的初次使用.png
type="radio"
作用：单选按钮，允许在多个拥有相同的name值的选项中选择其中一个。
注意事项：
一个单选按钮组：有相同name属性的单选按钮组成。
每个单选按钮必须有value属性，否则提交的表单数据将只有name，没有对应的值。
默认选中的按钮：使用checked属性进行控制
input中type为radioPlease select your preferred contact method:
Phone
Name
Submit
var form = document.querySelector("form");
var log = document.querySelector("#log");
form.addEventListener("submit", function(event) {
var data = new FormData(form);
var output = "";
console.dir(data)
for (const entry of data) {
console.log(entry)
output += entry[0] + "=" + entry[1] + "\r";
};
log.innerText = output;
event.preventDefault();
}, false);
结果：
type=radio和FormData的初次使用.png
type="checkout"
作用：定义一个复选框，可以设定为选中或者未选中。
注意事项：
name：type=checkbox时，name的值可以不同，可以相同，后台可以组成一个Array。【type=radio的时候，name的值是一定相同的】
value：value的值如果没有填写，默认为"on"，建议添加value属性
checked：checkbox的默认选中的由checked属性决定。
案例：type=checkbox
input中type为radioChoose your monster's features:
Scales
Horns
submit
var form = document.querySelector("form");
var log = document.querySelector("#log");
var button = document.querySelector("button")
button.addEventListener("click", function(event) {
var data = new FormData(form);
var output = "";
for (const entry of data) {
console.log(entry)
output += entry[0] + "=" + entry[1] + "\r";
};
log.innerText = output;
event.preventDefault();
}, false);
结果：
type=checkbox.png
type="button"
作用：创建一个没有默认行为的按钮；显示的值通过value属性控制，默认为空。【h5中通过取代】。type还可以指定为其他值，如："submit"【提交】、"reset"【重置】，设置为此类型之后就有了默认的行为。
属性：
form：与当前页面的
标签进行绑定。取值为form标签中的id属性值。如果在中，可以不指定form属性，默认与当前form关联。formenctype：指定提交的内容的格式，取值有application/x-www-form-urlencoded、multipart/form-data、text/plain等【将会覆盖form中的action属性】
formaction：处理按钮提交的路径【将会覆盖form中的action属性】
formmethod：指定提交的方式：取值有post、get、‘put’【将会覆盖form中的method】
formtarget：表示接收提交的表单后在哪里显示，取值有_self、_blank、_parent、_top
案例
input中type为radioPlease select your preferred contact method:
Phone
Name
var form = document.querySelector("form");
var log = document.querySelector("#log");
form.addEventListener("submit", function(event) {
var data = new FormData(form);
var output = "";
console.dir(data)
for (const entry of data) {
console.log(entry)
output += entry[0] + "=" + entry[1] + "\r";
};
log.innerText = output;
event.preventDefault();
}, false);
结果：
type=button的运行结果.png
元素
作用：表示是一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。
属性：button的属性和中的属性基本一致，
type： 设置button的类型。取值有button、submit、reset、menu【打开一个指定
注意事项
1、比更容易使用样式。只能使用文本样式，能使用HTML内容
2、如果按钮不是向服务器提交数据，保证中的type为button。·
type="file"
作用：用户可以选择一个或多个文件以提交表单的方式上传到服务器上，或者通过JavaScript的File API对文件进行操作。
附加属性：
accept：定义了文件input应该接受的文件类型。有多种类型的时候，使用逗号进行分割。取值有：
以.开头的合法的文件名拓展名【指定单个】、
一个不带拓展名的MIME类型字符串、
字符串audio/*、video/*、image/*【指定一类】
capture：捕获图像或视频数据的源，如指定使用哪个摄像头去获取数据。
files：被选择的文件以HTMLInputElement.files属性返回，值的类型是FileList对象。即所有选择的文件。
multiple：布尔属性，表示用户可以选择多个文件。
注意事项
accept属性不验证所选文件的类型，只是为浏览器提供指示来引导用户选择正确的文件类型。
出于安全原因，源文件的实际路径没有显示在input的value属性中，显示的内容为C:\fakepath\+文件名
案例：
input中type为radiolabel {
cursor: pointer;
}
Choose images to upload (PNG, JPG)
No files currently selected for upload
Submit
// 实际的输入框
const input = document.querySelector('input');
input.style.opacity = 0; // 不使用 visibility: hidden 或者 display: none，因为辅助技术将后两种样式解释为文件 input 是不可交互的。
// 选中文件的提示框
const preview = document.querySelector('.preview');
// 接收的文件的类型
const fileTypes = [
'image/jpeg',
'image/pjpeg',
'image/png'
];
// 添加input的change事件
input.addEventListener("change", updateImageDisplay)
// 验证文件类型的函数
function validFileType(file) {
return fileTypes.includes(file.type);
}
// 大小转化
function returnFileSize(number) {
if(number < 1024) {
return number + 'bytes';
} else if(number >= 1024 && number < 1048576) {
return (number/1024).toFixed(1) + 'KB';
} else if(number >= 1048576) {
return (number/1048576).toFixed(1) + 'MB';
}
}
// input中change的回调函数
function updateImageDisplay() {
// 先清空提示框中的内容
while (preview.firstChild) {
preview.removeChild(preview.firstChild); // js操作DOM值移除子元素
}
const curFiles = input.files;
if (curFiles.length === 0) { // 没有选中文件
const para = document.createElement('p'); // js操作DOM之创建元素
para.textContent = 'No files currently selected for upload';
preview.appendChild(para); // js操作DOM之添加子元素
} else {
const list = document.createElement('ol');
preview.appendChild(list);
for (const file of curFiles) {
const listItem = document.createElement('li');
const para = document.createElement('p');
if (validFileType(file)) {
para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
const image = document.createElement('img');
image.src = URL.createObjectURL(file);
listItem.appendChild(image);
listItem.appendChild(para);
} else {
para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
listItem.appendChild(para);
}
list.appendChild(listItem);
}
}
}
运行截图
type=file.png