《计算机网络技术》 动态网页制作技术 常用HTML控件课程积件 杨 姝
学习目标 1.了解html控件 2、熟练使用常见html控件
课程内容学习 1.html控件概念 HTML 控件是指属于 HTML 标准的控件（如按钮和复选框）。 Html控件不能在服务器端控制，只能在浏览器端通过javascript等脚本语言操作。要让html控件在服务器端运行，只需在Html控件的基础上加上runat=”server”构成html服务器控件即可。
课程内容学习 2.常见html控件 在html中，最常见的是html表单控件。比如注册会员、登录用户页面，都需要使用html表单控件。 描述 input type="text" 单行文本输入框 input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框(输入的文字用*表示)
课程内容学习 3.案例一：登录 （1）.代码 <html> <body> <form action="/example/html/form_action.asp" method="get"> <p>用户名: <input type="text" name="fname" /></p> <p>密  码: <input type="password" name="password" /></p> <input type="submit" value="登录" /> <input type="reset" value="重置"> </form> </body> </html>
课程内容学习 3.案例一：登录 （2）.显示效果
课程内容学习 3.案例一：登录 （3）.案例分析 ①单行文本输入框(input type="text") 单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。 ②密码输入框(input type="password") 密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。
课程内容学习 3.案例一：登录 （3）.案例分析 ③、提交(input type="submit")，重置(input type="reset")，按钮(input type="button")。 通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。本案例中，单击登录按钮时，数据会提交到服务器上名为 "form_action.asp" 的页面。 重置(input type="reset")可以清空文本框中的值。单击重置按钮，输入文本框中的值会被清空。 按钮(input type="button")用的是最多的，一般会配合脚本使用。
课程内容学习 4.案例二：注册 （1）.代码 <html> <body> <form> <input type="radio" checked="checked" name="Sex" value="male" />男性： <input type="radio" name="Sex" value="female" />女性： <br> 你的收入： <select name="income"> <option value="class1"><2000</option> <option value="class2">2000-5000</option> <option value="class3">5000-8000</option> <option value="class4">8000-11000</option> <option value="class5">>110000</option> </select>
课程内容学习 4.案例二：注册 （1）.代码 <br> 我的兴趣爱好： <input type="checkbox" name="favorite">旅游 <input type="checkbox" name="favorite">音乐 <input type="checkbox" name="favorite">美术 <input type="checkbox" name="favorite">绘画 <input type="checkbox" name="favorite">电影 自我介绍： <textarea rows="5" cols="50"></textarea> <input type="submit" value="注册" /> </form> </body> </html>
课程内容学习 4.案例二：注册 （2）.显示效果
课程内容学习 4.案例二：注册 （3）.案例分析 ①、 单选框(input type="radio") 使用单选框，让用户在一组选项里只能选择一个。注意这2个单选框有个共同的特点，name="Sex"，也就是说它们的name是相同的，这就告诉了浏览器，它们2个是一组的。如果有另外一组单选框，那么就需要指定另外一个name。否则，浏览器会默认所有单选框是一组的。 属性value是这个单选框的值，一般会通过脚本来获取选中的单选框的值。 跟在input后面的文字，是显示给用户看的，可以说是“单选框的代表的意思”，它可以和value相同，也可以不同。
课程内容学习 4.案例二：注册 （3）.案例分析 ②、复选框(input type="checkbox") 复选框允许用户在一组选项里，选择多个。和单选框有许多类似的属性。 ③、下拉框(select) 下拉框(Select)既可以用做单选，也可以用做复选。 一般常用于单选，默认选中的为第一个选项“<2000”，如果需要指定某一选项为默认可以使用selected="selected"来设置。如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。
课程内容学习 4.案例二：注册 （3）.案例分析 ④多行输入框(textarea) 多行输入框(textarea)主要用于输入较长的文本信息。其中cols表示textarea的宽度，单位是字符，一个英文字母占一个字符，一个汉字占两个字符，本案例中cols=”50”，则每行可以输入25个汉字或50个英文字母。 rows表示textarea的高度，单位是行。这里设置rows=”5”设置了5行的空间，如果输入的内容超过了5行，就会增加一个滚动条。
任务总结与思考 描述 控件 input type="text" 单行文本输入框 input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框(输入的文字用*表示)
课后练习 1.能进行多选的控件有？（ ）。 2.要定义一个5行20列的多行文本域，正确的代码是？( )。 1.能进行多选的控件有？（ ）。 A select B input type="radio" C input type="checkbox" D textarea 2.要定义一个5行20列的多行文本域，正确的代码是？( )。 A <textarea rows="5" cols="50"></textarea> B<textarea rows="5" cols="20"></textarea> C<textarea rows="20" cols="50"></textarea> D<textarea rows="20" cols="5"></textarea> 3.代码<input type="text" name="yourname">的功能是创建一个________？
练习答案 AC 解析： input type="radio"单选框，input type="checkbox"复选框，多行输入框(textarea)主要用于输入较长的文本信息。下拉框(Select)既可以用做单选，也可以用做复选。 一般常用于单选，如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。 2.B 解析：多行输入框(textarea)主要用于输入较长的文本信息。其中cols表示textarea的宽度，单位是字符，一个英文字母占一个字符，一个汉字占两个字符。rows表示textarea的高度，单位是行。 3.填空题答案:文本框 解析：单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。
谢 谢