常用表单重点知识

表单属性

1.action：服务器上处理表单的脚本；

2.method:提交方式

GET:少量且公开

POST:大量且加密

enctype:值对编码方案（普通表单和分块文件上传）

4.target

5.id:使用ID引用表单

6.onsubmit:事件属性，提交时执行的JS

表单类型

text/password/date/number/url/radio/select/textarea等

表单写法

重点属性介绍

1.name:value 名值对组合

2.required:必选项

3.readonly:只读，只能看，不能改，但能提交

4.disabled:禁用，只能看，不能优质资源网点我wcqh.cn改，不能提交

5.autocomplete：浏览器退回后保留原来的数据

6.number类型：min/max/step：限定表格中数据最大值和最小值及步长

7.date类型：min/max格式：1949-10-01/2000-01-01,表示只能选择这个时间区间

8.url类型：自带url类型验证

9.color类型：拾色器

10.upload类型：上传文件用，name不能用-线，可以用_线，input选择，button上传。

11.hidden隐藏域类型：不在页面显示，用来做赋值使用，一般都包含name和value。

12.range滑动条：可以有来做评星打分等用途。

13.progress进度条：双标签,可优质资源网点我wcqh.cn以给max和value,不可以给min

14.radio单选框: – name:必须相同，以保证唯一性– input和它自己的label标签绑定，建议：男(male),女(female),保密(secret)– input.value <==> input.id <==> label.for一致–checked:默认选项，避免空提交–总标签label.for和默认标签绑定

15.checkbox复选框

16.select+option下拉列表：name在select中，value在option中。 –实现提示的效果selected + disabled– name 和 value 分别在select和option中–选择过多，可优质资源网点我wcqh.cn以使用分组，optgroup– multiple:支持多选–<select required><option value=>：可验证select必选。

17.textarea多行文本框：

– textarea:没有value属性，它的值位于textarea标签之间– maxlength:最大长度–可以使用CSS限制textarea固定大小

20.label标签for和input标签id内容一致，进行绑定

21.output功能与span功能类似，但更好用，用来做计算输出

22.每个表单控件都有一个form属性，都指向当前表单可以用来访问表单不同的控件中的值，很重要！

代码范例

<formaction=“regist优质资源网点我wcqh.cner.php”method=“post”enctype=“application/x-www-form-urlencoded”><fieldset><!–表单分组–><legend>分组名称：基本信息</legend><divclass=“username”><labelfor=“username”>用户名：</label><!–label的for和input的id内容一致，进行绑定–><inputtype=“text”id=“username”name=“username”placeholder=“请输入用户名”requiredautocomplete/></div><divclas优质资源网点我wcqh.cns=“password”><labelfor=“password”>密码：</label><!–label的for和input的id内容一致，进行绑定–><inputtype=“password”id=“password”name=“password”placeholder=“请输入密码”requiredautocomplete/><buttononclick=“this.previousElementSibling.type=text“>显示密码</button></div><divclass=“email”><labelfor=“email”>邮箱：</label><!–email自优质资源网点我wcqh.cn带格式验证–><inputtype=“email”id=“email”name=“email”placeholder=“请输入邮箱”required/></div><divclass=“age”><labelfor=“age”>年龄：</label><inputtype=“number”id=“age”name=“age”min=“18”max=“80”placeholder=“请输入年龄”required/></div><divclass=“birthday”><labelfor=“birthday”>出生日期：</label><inputtype=“date”id=“birthday”n优质资源网点我wcqh.cname=“birthday”min=“1949-10-01”max=“2000-01-01”placeholder=“请输入年龄”required/></div><divclass=“blog”><labelfor=“blog”>网址：</label><!–URL自带格式验证–><inputtype=“url”id=“blog”name=“blog”placeholder=“请输入网址”required/></div><divclass=“color”><labelfor=“color”>拾色器</label><inputtype=“color”name=“color”id=“color”优质资源网点我wcqh.cnvalue=“#FFFF00”onchange=“getColor(this)“/><output>#FFFF00</output></div><divclass=“serach”><labelfor=“query”>搜索：</label><inputtype=“search”name=“search”id=“search”placeholder=“输入关键字”><buttontype=“button”>查询</button></div></fieldset><fieldset><legend>其他信息</legend><!– upload上传控件 –><divclass=“upload”优质资源网点我wcqh.cn><labelfor=“upload”>头像:</label><inputtype=“file”name=“name_pic”id=“upload”/><buttontype=“button”>上传</button></div><!– hidden 隐藏域 –><inputtype=“hidden”name=“uid”value=“10010”/><!– type=range 滑动块 –><divclass=“range”><labelfor=“range”>星级：</label><inputtype=“range”name=“range”id=“range”min=“0”max=“5优质资源网点我wcqh.cn“step=“1”oninput=“getStatus(this)“/><output>0</output></div><!– progress 进度条 –><divclass=“progress”><label>进度</label><!– min不要给 –><progressname=“progress”max=“100”value=“10”></progress><output></output><buttontype=“button”onclick=“handle(this)“>+1</button></div></fieldset><fieldset><legend>预置内容：优质资源网点我wcqh.cn</legend><!– 预置内容：用户选择就好，不用输入。服务器90%的安装问题都是因为输入控件导致的。–><!– 常用预置表单有radio,select等 –><divclass=“gender”><!– 主标签使用默认的选项，点击主标签显示默认 –><labelfor=“secret”>性别: </label><!– 1. name:必须相同，以保证唯一性 2. input和它自己的label标签绑定，建议：男(male),女(female),保密(secret) 3. input.id <==> label.for必须一致,建议input.value也一致。4. checked:优质资源网点我wcqh.cn 默认选项，避免空提交 5. 总标签label.for和默认标签绑定 –><inputtype=“radio”name=“gender”value=“male”id=“male”><labelfor=“male”>男</label><inputtype=“radio”name=“gender”value=“female”id=“female”><labelfor=“female”>女</label><inputtype=“radio”name=“gender”value=“secret”id=“secret”checked><labelfor=“secret”>保密</label></div><优质资源网点我wcqh.cn!– checkbox 多选框 –><divclass=“hobby”><!– 不用绑定某个标签，可以去掉for –><label>爱好：</label><!– 1. name:hobby[]，数组保存一个值或多个值 2. input.id <==> label.for一致 –><inputtype=“checkbox”name=“hobby[]”value=“game”id=“game”><labelfor=“game”>游戏</label><inputtype=“checkbox”name=“hobby[]”value=“trave”id=“trave”><labelfor=“tra优质资源网点我wcqh.cnve”>旅游</label><inputtype=“checkbox”name=“hobby[]”value=“shoot”id=“shoot”><labelfor=“shoot”>摄影</label><inputtype=“checkbox”name=“hobby[]”value=“program”id=“program”><labelfor=“program”>编程</label></div><!– select + option下拉列表 –><divclass=“edu”><labelfor=“edu”>学历：</label><selectname=“edu”id=“edu”mult优质资源网点我wcqh.cniple><!– 1.实现提示的效果selected + disabled 2.name 和 value 分别在select和option中 3.选择过多，可以使用分组，optgroup 4.multiple:支持多选 –><optionvalue=“”selecteddisabled>–请选择–</option><optgrouplabel=“义务教育”><optionvalue=“1”>小学</option><optionvalue=“2”>初中</option><optionvalue=“3”>高中</option></optgroup><optgrouplabel=“高等教育”><opt优质资源网点我wcqh.cnionvalue=“4”>专科</option><optionvalue=“5”>本科</option><optionvalue=“6”>硕士</option><optionvalue=“7”>博士</option></optgroup></select></div><!– datalist 数据列表 –><divclass=“like”><labelfor=“keyword”>语言：</label><!– 1.自带联想提示：预定义+自定义，即可实现自己输入，也能从预置中选择：input+select 2.input + dateList + option3.input.list <==> 优质资源网点我wcqh.cndatalist.id进行绑定 –><inputtype=“search”name=“language”list=“details”id=“keywork”><!– input.list <==> datalist.id进行绑定 –><datalistid=“details”><!– 预置列表 –><optionvalue=“html”>html</option><optionvalue=“php”>php</option><optionvalue=“css”>css</option><optionvalue=“js”>js</option><optionvalue=“vue”>vue优质资源网点我wcqh.cn</option><optionvalue=“node”>node</option></datalist></div></fieldset><div><labelfor=“comment”>个人简介</label><!– 1. textarea:没有value属性，它的值位于textarea标签之间 2. maxlength:最大长度 3. 可以使用CSS限制textarea固定大小 –><textareaname=“comment”id=“comment”cols=“30”rows=“10”>Hello world</textarea></div><button>提交</button><!– 优质资源网点我wcqh.cnfrom中的button，默认为提交，等同于以下代码 type=”submit” –><buttontype=“submit”></button><!– type=”button” 只是一个普通按钮，没有预置行为，如提交，复位 –><!– 如果想将表单的同步提交，改为异步提交(Ajax,Fetch),禁用默认行为 1. <button type=”button”> 2. 事件方法中: event.preventDefault(),禁用默认行为 3. form.onsubmit = “return false”,禁用当前表单默认提交行为 –></form>