HTML input 表单标签 type 属性 个人信息提交表HTML页面 更改 input type='color`拾色器的边框样式

type 属性

type 属性值 描述
text 没有键入type时候的默认类型,定义为输入任意文本内容;
tel 定义输入电话号码的字段,在移动端触屏移动端使用,用于唤起数字输入键盘,并不能限定只输入纯数字
email 定义邮件地址,当提交表单时会自动对 email 字段的值进行验证
radio 定义单选,在传参时,name属性值定义相同,然后设定不同的value值,的for属性值对应的id属性值
checkbox 定义多选,name相同,value值不同
password 定义密码
button 定义一个纯按键,常用于触动js函数,启动JavaScript 程序
range 定义用于精确值不重要的输入数字的控件(比如 slider 控件),min,max,step,value的定义同number
search 定义搜索框,外层需要有form表单,才能在移动端的软键盘显示“搜索”
url 定义网址地址 ,限定网址格式
color 定义颜色 ,存在value值中,value值为16进制(eg.#000000),颜色从拾色器中选取,该属性的组件由两层div组成的,chrome提供了两个伪类来控制
hidden 隐藏输入字段,可以作为type=“hidden”,也可以作为hidden = “hidden”,其效果相同
submit 提交form表单操作,传参不带有x,y的坐标(如.html?fname=姓&lname=名字)
image 可做背景图片,或者提交作用(传参中带有image的x,y坐标,如.html?fname=姓&lname=名字&x=19&y=25)
reset 重置为默认值
type 属性值-时间 -
date 定义日期(年月日)选择,格式xxxx-xx-xx
datetime-local 定义日期+时间选择,无时区限制
month 定义时间(年月),格式xxxx-xx
week 定义时间(年,周),格式xx-Wxx,无时区限制
time 定义时间(分钟),格式xx:xx,无时区限制

表单 的样式设置


<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
/* 如何更改 input 拾色器的外观*/  /* 火狐 不兼容*/
	/* ::-webkit-color-swatch-wrapper 设置拾色器的外层包括的边框带样式
	 * input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;} 消除外边框带*/
	.input_color[type='color']::-webkit-color-swatch-wrapper{padding: 0;}
	/* ::-webkit-color-swatch  设置内层的边框(放置从拾色器选取的颜色)样式,颜色改变的地方
	 * input[type='color']::-webkit-color-swatch {border: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" onclick="func_begin()" />
	<form action="index.html" method="get">
		<input type="search" name="search_res" placeholder="输入搜索关键字"/>
		<input type="submit" name="submit_search" value="?" style="border: none;">
	form>
	
	<input type="range" id="justify" name="justify" value="20" max="800" min="20" onmousemove="func_justify()"/>
	<input type="color" class="input_color" name="bgcolor" id="bgcolor" value="#f5f5f5" onchange="func_bgcolor()"
		style="border: 0;width: 50px;height: 15px; padding: 0;"  />
div>
<form id="major_form" action="chart.html" method="get">
	<fieldset id="field" disabled 
		style="width:500px;height: 20px;margin: 0 auto;line-height: 240%;background: whitesmoke;overflow: hidden;border-radius: 10px;">
		<legend style="font-family: STkaiti;text-align: justify;">个人信息legend>
		<input type="text" name="your_name" placeholder="input your name" size="50" /><br/>
		
		<input type="tel" name="telephone" placeholder="input 11 numbers" size="50" maxlength="11" required/>*<br/>
		<input type="email" name="mail" placeholder="input valid email" size="50" required="required"/>*<br/>
		<input type="password" name="pwd" size="50" maxlength="8" placeholder="input 8 points password" required/>*<br />
		<b style="font-size: 15px;">请选择生日b>
		<input type="date" max="2018-12-31" /><br />
		<b style="font-size: 15px;">请选择性别b>
		<input type="radio" name="sex" id="male" value="male" checked="" /><label for="male">label>
		<input type="radio" name="sex" id="female" value="female" /><label for="female">label><br />
		<b style="font-size: 15px;">请选择年级b>
		<input type="checkbox" name="major" id="onelevel" value="onelevel" checked/><label for="onelevel">一级label>
		<input type="checkbox" name="major" id="twolevel" value="twolevel" /><label for="twolevel">二级label>
		<input type="checkbox" name="major" id="threelevel" value="threelevel" /><label for="threelevel">三级label>
		<input type="checkbox" name="major" id="fourlevel" value="fourlevel" /><label for="fourlevel">四级label><br />
		<input type="file" name="file" value='上传个人资料' size="50" multiple/><br />
		<b style="font-size: 15px;">请选择英语等级b>
		<input type="number" name="englevel" step="2" max="8" min="4" value="4"/><br/>
		<b style="font-size: 15px;">请选择填表时间b>
		<input type="time" name="input_time" id="input_time" value="18:56"/><br/>
		<b style="font-size: 15px;">请选择成果验收周b>
		<input type="week" name="input_week" id="input_week" value="2018-W52"/><br />
		<b style="font-size: 15px;">请输入作品网页b>
		<input type="url" name="page_url" id="page_url" placeholder="请输入网址" /><br/>
		<input type="hidden" id="reminder_text" name="reminder_text" size="60" style="text-align:center;height: 15px;border-radius: 50%;border: 0;" value="非常重要:注册成功后不能修改!" disabled>input><br />
		<input type="checkbox" id="confirm_reminder" name="confirm_reminder" hidden="hidden" required="required"/>
		<label for="confirm_reminder" id="confirm_reminder_label" hidden="hidden">确认提示label>
		<input type="reset" value="重置" />
		
		<input type="submit" value="提交" onclick="reminder()"/>
	fieldset>
form>
body>
html>
<script>
//实现表格解封,开始输入
function func_begin(){
	//将fieldset里面的表单更改为能够使用(去掉disabled属性)
	document.getElementById('field').disabled = null
	//input[type='range']跳至最大
	document.getElementById('justify').value = document.getElementById('justify').max
	//表格自动展开至最大幅度
	document.getElementById('field').style.height = document.getElementById('justify').value + 'px'
}
//实现当调节range幅度时,自动调节表格的展开程度
function func_justify(){
	var jus = document.getElementById('justify').value
	document.getElementById('field').style.height = jus+'px'
}
//实现当点击input[type='color']时,自动调节表格内部的背景颜色
function func_bgcolor(){
	document.getElementById('field').style.background = document.getElementById('bgcolor').value
}
function reminder(){
	document.getElementById('reminder_text').type = 'text'
	document.getElementById('confirm_reminder').hidden = null
	document.getElementById('confirm_reminder_label').hidden = null
}
script>

HTML input 表单标签 type 属性 个人信息提交表HTML页面 更改 input type='color`拾色器的边框样式_第1张图片


你可能感兴趣的:(HTML,Notes)