HTML5表单元素的学习

本文内容

             认识表单

             基本元素的使用

             表单高级元素的使用

             现学现卖——创建用户反馈表单

---

★  认识表单

     表单主要用于手机网页上浏览者的相关信息。其标签为<form></form>。表单的基本语法格式如下：

1. <form action="url" method="get | post" enctype="mime">
2. ......
3. </form>
5. //action="url"指定处理提交表单的格式，它可以是一个URL地址或者一个电子邮件地址；
6. //method="get | post"指明提交表单的HTTP方法；
7. //enctype=mine指明用来把表单提交给服务器时的互联网媒体形式；

       表单是一个能够包含表单元素的区域。通过添加不同的表单元素，将显示不同的效果。

 

★ 基本元素的使用

     △ 单行文本输入框text的使用

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，例如用户姓名和地址等

1. <input type="text" name="..." size="..." maxlength="..." value="...">
2. //type="text"定义单行文本框；
3. //name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
4. //size属性定义文本框的宽度，单位是单个字符宽度；
5. //maxlength属性定义最多输入的字符数；
6. //value属性定义文本框的初始值；

     △  多行文本输入框textarea的使用

多行文本输入框（textarea）主要用于输入较长的文本信息。

1. <textarea name="..." cols="..." rows="..." wrap="hard | soft">
2. </textarea>
3. //name属性定义多行文本框的名称，同样的要保证数据的准确采集，必须定义一个独一无二的名字；
4. //cols（即column的缩写，加s表示复数形式）属性定义多行文本框的宽度（可理解为列数）。rows属性定义文本行的高度（可理解为行数）。cols与rows的单位都是单个字符宽度；
5. //wrap属性规定当在表单中提交时，文本区域中的文本如何换行。
6. //wrap="soft"表示当在表单中提交时，textarea 中的文本不换行，是默认值;
7. //wrap="hard"当在表单中提交时，textarea 中的文本换行（包含换行符）。需要注意的是，当使用 "hard" 时，必须规定 cols 属性。

    △  密码域password的使用

密码输入是一种特殊的文本区域，主要用于属于一些保密信息。当网页浏览者输入文本时，显示的是黑点或者其他符号，这样就增加了文本的安全性。

1. <input type="password" name="..." size="..." maxlength="...">
2. //type="password"定义密码框
3. //name属性定义密码框的名称，同样的要保证数据的准确采集，必须定义一个独一无二的名字
4. //size属性定义密码框的宽度，单位是单个字符宽度
5. //maxlength属性定义最多输入的字符数

     △   单选按钮radio的使用

单选按钮主要是让网页浏览者在一组选项里面只能选择一个选项。

1. <input type="radio" name="..." value="...">
2. //type="radio" 定义单选按钮；
3. //name属性定义单选按钮的名称，同样的要保证数据的准确采集，必须定义一个独一无二的名字；
4. //value属性定义单选按钮的值；
5. //注意，如果是同一组的单选项，那么他们的name属性必须相同，域值（value必须不同）

示例   性别的选取

1. <input type="radio" name="sex" value="male">男
2. <input type="radio" name="sex" value="female">女
3. <!--name属性必须一致，保证了两个单选项为同一组，value值一般为不同-->

    △  复选框checkbox的使用

复选框主要是让网页浏览者在一组选项里可以同时选择多个选项。每个复选框都是一个独立单元，都必须要有唯一的name。

1. <input type="checkbox" name="..." value="...">
2. //type="checkbox"定义复选框；
3. //name属性定义复选框的名称；
4. //value属性定义复选框的值；
5. //注意！！！在同一组的复选框，name属性值必须相同；

    △  下拉列表框select的使用

下拉列表框主要用于在有限的空间里设置多个选项。下拉列表既可以用作单选，也可以用作复选。

1. <select name="..." size="..." multiple>
3. <option value="..." selected>...</option>
5. </select>
6. //name属性定义下拉列表框的名称；
7. //size规定下拉列表中可见选项的数目；
8. //multiple属性表示可以多选，若不设置该属性，那么只能够单选；
9. //value属性定义选择项的值；
10. //selected属性表示默认已经选择本选项；

提示：

多选的实现方式可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。但对用户更友好的方式是使用复选框；

当使用multiple进行多选时，

• 对于 windows：按住 Ctrl 按钮来选择多个选项
• 对于 Mac：按住 command 按钮来选择多个选项

 

    △  普通按钮button的使用

普通按钮用来控制其他定义了处理脚本的处理工作。

1. <input type="button" name="..."value="..." onClick="...">
2. //type="button"定义普通按钮；
3. //name属性定义普通按钮的名称；
4. //value属性定义按钮的显示文字
5. //onClick属性表示单击行为；

 

    △  提交按钮submit的使用

提交按钮用来将输入的信息提交到服务器。

1. <input type="submit" name="..." value="...">
2. //通过提交按钮submit可以将表单里的信息提交给表单里action所指向的文件。

 

   △  重置按钮reset的使用

重置按钮用来重置表单中输入的信息。

1. <input type="reset" name="..." value="...">

注意：点击重置按钮，将会把reset按钮所在的表单中的填写数据全部清空。

 

★  表单高级元素的使用

表单中常见的高级元素包括，URL，email，time，range，search等。但是IE 9.0浏览器对这些高级元素的支持并不是很好。

（提示：用户可以使用普通属性设置url输入框，例如使用max属性设置其最大值，min属性设置其最小值，step属性设置合法的数字间隔，value属性设置默认的属性值。）

    △  url属性的应用

url属性适用于说明网站网址的。显示为一个文本字段输入URL地址，在提交表单时，会自动验证url的值。

1. <input type="url" name="userUrl">

   △  email属性的应用

与url属性类似，email属性用于让浏览者输入email地址。在提交表单时，会自动验证email域的值。

1. <input type="email" name=userEmail>

   △  date属性和time属性的应用

在HTML 5中，新增一些日期和时间输入的类型，包括date，datetime，datime-local，month，week和time。

时间和日期输入类型

属性	含义
date	选取日，月，年
month	选取月，年
week	选取周，年
time	选取时间
datetime	选取时间，日，月，年
datetime-local	选取时间，日，月，年（本地时间）

 

1. <input type="date" name=testDate>

§ 注意：Chrome浏览器仅对datetime的支持并不好，但对其他时间和日期的支持比较好。

 

   △  number属性的应用

number属性提供了一个数字的输入类型。用户可以直接输入数字或者通过单击微调框中的向上或者向下按钮选择数字。

1. <input type="number" name="testNumber" step="5">
2. //step="5"属性表示填入的数字都是5的公倍数；

 

   △  range属性的应用

range属性是显示一个滚动的控件。和number属性一样，用户可以使用max，min和step属性控制控件的范围。

1. <input type="range" name="testRange" min="0" max="10">
2. //在默认情况下，滑块位于滚动轴的中间位置，且min=0，max=100；
3. //目前大部分浏览器对这一属性还不能很好的支持。

   △   required属性的应用

required属性规定必须在提交之前填写输入域（不能为空）。required属性适用于以下类型的输入属性：text，search，url，email,password,date,picker,number,checkbox和radio等。

1. <input type="text" name="userTxt" required="required">
2. //required也可以直接写required

 

现学现卖

       创建用户反馈表单

实现代码

1. <style>
2. h2 {
3. text-align: center;
4. }
5. input{
6. margin:8pxauto;
7. }
8. </style>
9. <h2>
10. 用户反馈表单
11. </h2>
12. <hr/>
13. <form>
14. 姓&nbsp;&nbsp;名：<input type="text" name="userName"><br/>
15. 性&nbsp;&nbsp;别：<input type="radio" name="userSex" value="male">男<input type="radio" name="userSex" value="female">女<br/>
16. 年&nbsp;&nbsp;龄：<input type="number" min="1" max="110" name="userAge" style="size: 200px;"><br/>
17. 联系电话：<input type="text" name="userTel"><br/>
18. 电子邮件：<input type="email" name="userEmail"><br/>
19. 联系地址：<input type="text" name="userAddress"><br/>
20. 请在此处填写你的建议<br/><textarea cols="50" rows="20"></textarea>
21. <input type="submit" value="提交">
22. <input type="reset" value="重填">
23. </form>

 

 

 

 

 

来自为知笔记(Wiz)