<input> type 属性

  1. text：没有键入type时候的默认类型，定义为输入任意文本内容；
  2. tel：定义输入电话号码的字段，在移动端触屏移动端使用，用于唤起数字输入键盘，并不能限定只输入纯数字
  3. email：定义邮件地址，当提交表单时会自动对 email 字段的值进行验证
  4. radio：定义单选，在传参时，name属性值定义相同，然后设定不同的value值，<label>的for属性值对应<radio>的id属性值
  5. checked：定义多选，name相同，value值不同
  6. password：定义密码
  7. button：定义一个纯按键，常用于触动js函数，启动 程序
  8. date：定义日期（年月日）选择，格式xxxx-xx-xx
    datetime-local：定义日期+时间选择，无时区限制
    month：定义时间（年月），格式xxxx-xx
    time：定义时间（分钟），格式xx:xx，无时区限制
    week：定义时间（年，周），格式xx-Wxx，无时区限制
  9. range：定义用于精确值不重要的输入数字的控件（比如 slider 控件），min,max,step,value的定义同number
  10. search：定义搜索框，外层需要有form表单，才能在移动端的软键盘显示“搜索”
  11. url：定义网址地址 ，限定网址格式
  12. color：定义颜色 ，存在value值中，value值为16进制(eg.#000000)，颜色从拾色器中选取，该属性的组件由两层div组成的，chrome提供了两个伪类来控制
*  ::-webkit-color-swatch-wrapper // 外层的div，可通过input标签的style=\"border:0;\"来消除，
	① input[type=\"color\"]::-webkit-color-swatch-wrapper {padding: 0;}
	② style=\"border:0;\"
	①可消除外层的灰色的div边框，但会留下左右两个偏黑色的线；②可消除div边框，若单独使用内层的div(放置从拾色器选取的颜色)颜色会变窄
	PS：①和②两者结合使用
* ::-webkit-color-swatch 			// 内层的div(放置从拾色器选取的颜色)，颜色改变的地方
	input[type=\"color\"]::-webkit-color-swatch {border: 0;}  // 相当于把内层的div的边框给去掉
  1. hidden：隐藏输入字段,可以作为type=“hidden”，也可以作为hidden = “hidden”，其效果相同
  2. submit：提交form表单操作，传参不带有x,y的坐标(如.html?fname=姓&lname=名字)
  3. image：可做背景图片，或者提交作用(传参中带有image的x,y坐标，如.html?fname=姓&lname=名字&x=19&y=25)
  4. reset：重置为默认值
<!--demo-->
<html>
	<head>
		<  charset=\"utf-8\" />
		< ></ >
		<style type=\"text/css\">
			.input_color[type=\'color\']::-webkit-color-swatch-wrapper{padding: 0;}
			.input_color[type=\'color\']::-webkit-color-swatch{border: 0;border-radius: 10px;}
		</style>
	</head>
	<body>
		<div style=\"display: flex;margin: 0 auto;flex-direction: row;align-items: center;justify-content: space-around;width:500px;\">
			<input type=\"button\" name=\"begin\" value=\"enter the form\"  =\"func_begin()\" />
			<form action=\"index.html\" method=\"get\">
				<input type=\"search\" name=\"search_res\" placeholder=\"输入搜索关键字\"/>
				<input type=\"submit\" name=\"submit_search\" value=\"

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章