表单的应用-优快云博客

表单

form表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<form  action=""  method=""  enctype=""   name="" >
  表单元素
  ……
</form>

action：属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL

method：属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST.

enctype：属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：

application/x-www-form-urlencoded（默认的设置，没有文件上传可以不加）
multipart/form-data (有文件上传)

表单的作用

搜集不同类型的用户输入信息表单是由网页上可以提供用户输入和选择的⼀些控件（表单元素）组成的

<input  type="text"   name=""  size=""   maxlength="" placeholder='' value="" autofocus type="submit"/>
<!--
type：值为text为单行文本框，不写默认就是这个值，单行文本输入框
size: 文本框的长度
maxlength：文本框可以输入内容的最大长度
minlength 本框可以输入内容的最小长度
placeholder：占位符
value：输入的内文本，真正提交到后端的数据【在input中输入的值，自动就会给value】
name：自定义名称，想要数据能够传递到后端，必须添加name字段
autofocus  默认获取光标,只能使用一次，使用的多的时候，默认在第一个上使用
 提交按钮 submit
-->

密码框

属性：type="password"

<input  type="password"   name=""  size=""   maxlength=""  value="" />

多行文本框

<textarea  name=""   cols=""    rows=""  ></textarea>

注意：默认点击边框有一个蓝色的边框 input:focus{ outline: 0;}

单选框

属性：type="radio"

<input type="radio"  name=""  value=""  checked="checked" />
<!--
type：radio表示单选框
checked：默认选中
-->

注意：单选框name值相同则为同一按钮组；单选框中被提交的值是value中的值

label

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<form>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
</form>

for属性：规定 label 绑定到哪个表单元素 < label > 标签的 for 属性应当与相关元素的 id 属性相同

复选框

属性：type="checkbox"

<input type="checkbox" name="hobby[]" value="乒乓球"> 
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球"> 
<input type="checkbox" name="hobby[]" value="网球">

注意：复选框name值必须为同名数组则为同一按钮组

下拉菜单

<!-- 单选下拉菜单 --> <select name="" size="" > 
<optgroup label=分组名称> <option value= " " selected=selected></option> …… </optgroup> </select> 
<!-- 多选下拉菜单 --> <select name="" size="" multiple= "multiple" > <optgroup label=分组名称> <option value="" selected=selected></option> …… </optgroup> </select>

size：下拉菜单的高度 multiple：多重的，多个的

浏览框

<input type="file" name="" accept="" />

accept：限制文件上传格式 accept=".csv" 上传.csv格式

accept="application/vnd.ms-excel" 上传.xls格式

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 上传.xslx格式

accept="text/plain" 上传.png/.jpg/etc格式

accept="image/" 上传图片格式

accept="text/html" 上传.htm,.html格式

accept="video/" 上传video(.avi, .mpg, .mpeg, .mp4)格式

accept="audio/ *" 上传audio(.mp3, .wav, etc)格式 accept=".pdf" 上传.pdf格式 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 如果限制两种文件格式，同时限制

注意：表单提交方式必须为post form必须设置属性

enctype="multipart/form-data"" 上传video(.avi, .mpg, .mpeg, .mp4)格式

accept="audio/ *" 上传audio(.mp3, .wav, etc)格式 accept=".pdf" 上传.pdf格式 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 如果限制两种文件格式，同时限制

注意：表单提交方式必须为post form必须设置属性enctype="multipart/form-data"

隐藏域

<input  type= " hidden"   name=""   value="" />

注意：隐藏域不会在页面的显示隐藏域的值仍会被提交到服务器

按钮

按钮有三种：普通、提交、重置

普通 type="button" 配合js完成⼀些操作
重置 type="reset" 重置表单数据有默认的按钮标题。
提交 type="submit" 提交表单

提交按钮

<input  type= "submit"   name=""   value=""/>

重置按钮

<input  type= "reset"   name=""   value=""/>

普通按钮

<input  type= "button"   name=""   value=""/>

图片按钮【默认是提交按钮的功能】

<input  type= "image"  src=""  name=""   value=""/>

readonly和disable属性

readonly

readonly 属性规定输入字段为只读,但其value值仍会被表单提交

readonly属性只针对text、password和textarea有效

disabled

disabled属性规定禁用该表单元素，其value值不会被表单提交

disabled属性对所有表单元素均有效，包括select, radio, checkbox, button等使用

disabled属性后表单元素背景会变成灰色