html5制作表单网页

制作表单网页

表单语法

 <form method="post" action="result.html">
    /*
     method="post"
     规定任何发送表单数据常用值：get |post 
     
     在实际网页中开发通常采用post方式提交表单数据
     action="result.html"
     表示向何处发生表单数据
    
     */
     
        <p>昵称：<input name="name" type="text"></p>
        <p>密码：<input name="pass" type="password"></p>
        <p>
            <input type="submit" name="Button" value="提交" />
            <input type="reset" name="Reset" value="填" />
        </p>

    </form>

表单属性

• action属性

  在表单收集到信息后，需要将信息传递个服务器进行处理，action属性性用于指定接收并处理表单数据的服务器程序的url地址

• method属性

  用于设置表单数据的提交方式，其取值为get或post

• name属性

  用于指定表单的名称，以区分同一个页面中的多个表单

• autocomplete属性

用于指定表单是否有自动完成功能，取值on/off

• novalidates属性

  指定在提交表单时取消对表单进行的检查

表单元素格式

语法：

<input type="text" name="uname" value="tetx"/>
/*
type="text"
input 原属类型

name="uname"
input原属名称

value="text"
input原属值

*/

属性	说明
type	指定元素的类型，text、password、checkbox、radio、submit、reset、file、hidden、image、 button、email、url等，默认为text。
name	指定表单元素的名称
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度，当type为text或password时，表单元属的大小字符为单位，对于其他类型，宽度以像素为单位
maxlength	type为text或password时输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否时被选择

文本框

• 单行文本输入框<input =type=“text”’/>

  单行文本输入框常用于输入简短的信息，如用户名，账号，身份证号码等，常用的属性有name、value、maxlength

  语法：

  <input type="text" name="userName" value="用户名" size="30"maxlength="20"/>
  /*
  type="text"
  文本框
  
  name="userName"
  文本框名称
  
  value="用户名"
  文本框初始值
  
  
  size="30"
  文本框长度
  
  maxlength="20"
  文本框输入的最多字符
  
  */
  

密码框

密码输入框<input type=“password”/’>

密码输入框用来输入密码，其内容将以原点的形式显示

语法：

<input type="password" name="pass" size="20"/>

/*
type="password" 
密码框 

name="pass"
密码框名称

size="20"
密码框的长度
*/

单选按钮

• 单选按钮<input type=“radio”/’>

  • 单选按钮用于单项选择 在定义单选按钮时，必须用同一组的选项指相同的name值，这样”单选“才会生效

  语法：

  <input name="gender" type="radio" value="男" checked/>男
  <input name="gender" type="radio" value="女"/>女
  
  /*
  name="gender"
  name相同声明属于同一组
  type="radio"
  单选按钮
  
  value="男"
  值
  
  checked
  单选按钮选中状态
  */
  

  复选框

  复选框<input type=“checkbox”/’>

  复选框常用于多项选择，如选择兴趣 爱好等 可对其他checked属性，指定默认选项中项。

语法：

<input type="checkbox" name="interst" value="sports"/>运动

<input type="checkbox" name="interst" value="program" checked/>编程
<input  type ="checkbox" name="intrst" value="play" />玩游戏

按钮

• 普通按钮<input type=“button”’/>

  • 普通按钮常常配合javaScript 脚本语言使用

• 提交按钮<input type=“submit”’>

  • 提交按钮是表单中的核心控件，用户完成信息输入后，一般都需要单击提交按钮才能完成表单数据的提交

• 重置按钮<input type=“reset”’/>

  • 单用户输入的信息有误时，可单击重置按钮取消已输入的表单信息

• 图像 形式的提交按钮<input type=“image”’/>

  • 图像形式按钮的提交按钮用图像替代了默认的按钮，外观更加完美，定义src属性指定图像的url地址

语法：

  <input type="reset" name="butReset" value="重置"/>
   <input type="image" src="./inage/anniu.png" width="30px" height="30px"/>
   <input type="button" name="butButton" value="button"/>

文件域

• 文件域<input type=“file”/’>

  • 单定义文件域时页面中将出现一个文件框和一个“浏览。。。按钮，用户以通过填充文件路径或直接选择文件的方式，将文件的方式，将文件提交给后台服务器

  语法

<form action="" method="post" enctype="multipart/form-data">
    
    <p>
        <input type="file" name="files"/>
        <input type ="submit" name=upload value="上次传"/>
    </p>
</form>

电子邮件输入框

• email类型<input type=“email”/’>
  • 专门用于输入E-mail地址的文本输入框，用来验证email输入的内容
  • 是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息

语法

<p>
    邮箱：<input type="email" name="email"/>
</p>
<input type="submit"/>

网址输入框

• url类型<input type=“url”/’>
  • 用于输入URL地址的文本框 ，如果所输入的内容是url地址的文本，则会提交数据到服务器；如果输入的不符合url地址，则不允许提交 并且有提示信息。

语法

<p>
    输入网址：
    <input type="url" name="userUrl" />
    
    
</p>
<input type ="submit"/>

数值输入框

• number类型<input type=“number”/’’>
  • 用于提供输入数值的文本框，在提交表单时，会自动检测该输入框中的内容是否为数字，如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。

语法：

<p>
    数字输入：<input type="number" name="num" min="0" max="100" atep="10"/>
</p>
<input type=submit/>
/*
type="number"
数字

min="0"
最小值

max="100"
允许最大值

step="10"
合法的数字间隔，默认值为1
*/

滑块

• range类型<input type=“range”/’>’
  • 用于提供一定范围内数值输入范围，在网页中显示为滑动条，提供min属性和max属性，可以设置最大小值与最大值，提过step属性指定每一次滑动的步幅。

语法

<p>
    请输入数字：<input type="range" name="num" min="0" max="100" step="10"/>
      
</p>

搜索输入框

• search类型<input type=“search”/’>’
  • 用于输入搜索关键的文本框，它能自动记录一些字符，列如站点搜索或者Google搜索，在用户输入内容后，其右侧会附带一个删除图标，单击这个图标可以快速清理内容。

语法

<p>
    关键词：<input type="search" name="sousuo"/>
</p>
<input type="submit"/>

总结

表单

表单主要用来制作动态网页，方便和用户进行交互

常用的表单元素

文本框<text">

密码框 password

单选框radio

复选框checkbox

按钮button,submit,reset

文件file

邮箱email

网址url

数字number

滑块range

搜索search