• web表单（详解）

    目录

    1. 表单的概述

    1.1 表单组成

    2. 表单标记

    2.1 input标记

    2.2 select标记

    2.3 textarea标记

    3.HTML5新增标记

    3.1 datalist标记

    3.2 date 输入类型

    3.3 color输入类型

    3.4 button标记

    3.5 details标记和summary标记

    3.6 progress标记

    3.7 meter标记 

    4 综合案例：

    1. 表单的概述

    1.1 表单组成

    表单由表单标签、表单域以及表单按钮组成。

    1.表单标签：包含处理表单数据使用的服务器端程序的URL以及数据提交到服务器的方法。

    2.表单域:包含文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等，用来收集用户需要提交到服务器的数据。

    3.表单按钮:包括提交按钮、 重置按钮和普通按钮。表单按钮可以来控制其他定义了处理脚本的处理工作。

    2. 表单标记

    表单标记用来定义表单采集数据的范围，其起始标记和结束标记分别是

    和
    ，表单标记的语法格式如下所示:

    1. <form action="URL" method= "get|post" enctype="..." target="...">
    2. form>

    其中:
    (1) action="URL", 用来指定服务器端处理提交表单信息的程序是什么。

    (2) method="ge|post".用来指明提交表单数据到服务器所使用的传递方法。post方法的安全性比较高，传送的数据量相比get方法要大，所以一般推荐使用post方法进行数据。get方法的安全性较差， 传输的数据量小，一般限制在2 KB左右，但其执行效率比post方法高。

    (3) enctye="...", enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。

    (4) target.-="..."用来指定提交数据给服务器后，服务器所返回的文档结果的显示位置。该属性的取值及含义如下：

    _blank:在一个新的浏览器窗口中显示文档。

    _top:把文档显示在原来的最顶部浏览器窗口中，因此取消所有其他框架。

    _parent:把文档显示在当前框的直接父级框中，如果没有父框时等价于_self。

    _self:在当前浏览器中显示指定文档。

    2.1 input标记

    input标记定义的语法格式如下所示:
     

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

    其中，type属性用来说明提供给用已进行信息输入的类型，例如文本框、单选按钮或复选框。

    input标记type属性的属性值及说明
    属性值说明
    text单行文本框
    password为用户提供密码输人框
    radio单选按钮
    checkbox复选框
    submit提交按钮
    reset重置按钮
    button通按钮

    如果需要限制用户输入数据的最大长度，在input标记中需要使用最大长度的属性maxlength

    例如：

    <input type="text" name="userName" maxlength="9">

    复选框和单选按钮：

    单选按钮：

    <input type="radio" value-"..." checked>

    复选框：

    <input type="checkbox" vlaue="..." checked>

    隐藏域：收集或发送信息的不可见元素，对网页来说隐藏域是看不见的。

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

    2.2 select标记

    标记可以在浏览 器窗口中设置下拉式菜单或者带有滚动条菜单

    1. <select name="" size="" multiple>
    2.     <option value="选项1">选项1
    3.         ……
    4.     <option value=”选项n">选项n
    5. select>

    select标记中有几个常用属性，分别是name、size、 multiple。

    name属性是用户提交表单时，服务器程序用于获取用户输人信息的名字；

    size属性控制在浏览器窗口中这个菜单选项的显示条数；

    multiple属性设置用户一次是否可以选择多个选项，如果缺省multiple,用户一次只能选择一个。

    注意：有几个选项就需要有几个option标记

    2.3 textarea标记

    • 其中：
    (1) name属性、多行文本框的名称， 这项是必不可少的，服务器端通过这个名字获取这文本框所输人的信息。
    (2) cols属性。垂直列。在没有进行样式表设置时，该属性的值表示一行中可容纳的字数。文本框的宽度也是通过这个属性调整的。
    (3) rows属性， 水平行，表示可显示的行数。如果rows=5， 表示可显示5行。超过行，需要拖动滚动条进行查看。
    (4)通常情况下只有按下Enter键时才产生换行。将wrap属性设置为virtual或physical能实现自动换行功能( word wrapping )。

    3.HTML5新增标记

    3.1 datalist标记

    datalist元素用于定义输人框的选项列表，列表通过datalist内的aption元素创建。如果用户不希望从列表中选择某项，也可以自行输大其他内容。datalist元素通常 与input元素联合使用来定义input的取值。在使用标记时，需要通过id属性为其指定一个唯一标识， 然后为input元素指定list属性，将该属性值设置为option元素对应的id属性值即可

    3.2 date 输入类型

    data日历的语法格式：

    <input type="date" name="..." value="..." min="..." max="..." step="...">

    注意：现目前只有谷歌浏览器完全实现了日历功能。

    3.3 color输入类型

    color输人类型用于规定颜色，语法格式如下：

    <input type="color" value="..." name="..."/>

    其中，value值是定义初始的默认颜色。

    例如：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>title>
    7. head>
    8. <body>
    9. 	请选择你喜欢的颜色：
    10. 	<input type="color" name="likecolor" value="#00ff00">
    11. body>
    12. html>

    3.4 button标记


    (2) 
    (4)鼠标单击事件、弹出信息的代码可直接写在

    3.5 details标记和summary标记

    标记用于描述文档或文档某个部分的细节。标记包含在
    表
    记中，并且是
    标记的第一 个子标记，包含的内容是
    标记的标题。初始时，表题对用户是可见的，用户单击标题时，会显示或隐藏details标记中的其他内容。如果需要默认状态为展开标记中设置open属性，即

    例如：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>details and summarytitle>
    7. head>
    8. <body>
    9. 	<details open>
    10. 		<summary>显示在线用户summary>
    11. 		<ul>
    12. 			<li>李四li>
    13. 			<li>张三li>
    14. 			<li>王五li>
    15. 			<li>赵六li>
    16. 		ul>
    17. 	details>
    18. body>
    19. html>

    结果：

     

    3.6 progress标记

    progress标记的作用是提示任务进度，这个标记可以用JavaScript脚本动态地改变当前的进度值。语法结构如下所示:

    <progress value="值" max="值">

    max属性:是一个数值，指明任务一共需要多少工作量。
    valne属性: 是一 个数值，规定已经完成多少 工作量。
    注意：value属性和max属性的值必须大于0，而且value的值需要小于或等于max属性的值

    例如：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>progresstitle>
    7. head>
    8. <body>
    9. 	<progress value="50" max="100">
    10. 	progress>
    11. 	<p>
    12. 		<strong>注意：strong>
    13. 		IE 9或者更早版本的IE浏览器不支持 progress标签
    14. 	p>
    15. body>
    16. html>

    结果：

    3.7 meter标记 

    meter 标记用来定义度量衡，只用于已知最大值和最小值的度量(如磁盘使用情况、查询结果的租关性等)。

    注意： 标记不能当一个进度条使用，并且IE浏览器还不支持该标记。

     标记的常用属性
    属性名描述
    min指定规定范围时允许使用的最小值，该属性的默认值为0,设值不可以小于0
    max指定规定范围时允许使用的最大值，如果设定该属性值小于min属性值，浏览器会把min设置为最大值。默认值为1
    value在元素中的实际数量值。如果设置了最小值和最大值(由min属性和max属性定义)，
    该值必须在最小值和最大值之间。默认值为0
    high规定范围的上限值，如果该属性值小于low属性值，则把low属性值视为high属性值，
    如果该属性值大于max属性值，则把max属性值视为high属性值
    low规定范围的下限值，必须小于或等于high属性的值。如果low属性值小于min属性值，
    浏览器把min属性的值视为low属性的值
    optimum设置最佳值，属性值必须在min属性值与max属性值之间，可以大于high属性值
    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>metertitle>
    7. head>
    8. <body>
    9. 	<p>空间剩余大小：
    10. 		<meter min="0" max="1024" value="600">600/1024meter>600/1024 GB
    11. 	p>
    12. body>
    13. html>

    结果：

    4 综合案例：

     

     

    代码演示：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>表单综合实例title>
    7. head>
    8. <body>
    9. 	<table border="0" width="500" align="center" cellpadding="2" cellspacing="0">
    10. 		<caption align="center"><h2>学生注册信息h2>caption>
    11. 		<form action="server.php" method="post">
    12. 			<tr>
    13. 				<th>姓名：th>
    14. 				<td><input type="text" name="username" size="20">td>
    15. 			tr>
    16. 			<tr>    
    17. 				
    18. 				<th>性别：th>
    19. 				<td>
    20. 					<input type="radio" name="sex" value="1" checked=checked/>男
    21. 					<input type="radio" name="sex" value="2"/>女
    22. 					<input type="radio" name="sex" value="3"/>保密
    23. 				td>
    24. 			tr>
    25. 			<tr>
    26. 				
    27. 				<th>学历：th>
    28. 				<td>
    29. 					<select name="edu">
    30. 						<option>--请选择--option>
    31. 						<option value="1">小学option>
    32. 						<option value="2">初中option>
    33. 						<option value="3">高中option>
    34. 						<option value="4">大专option>
    35. 						<option value="5">本科option>
    36. 						<option value="6">研究生option>
    37. 						<option value="7">其他option>
    38. 					select>
    39. 				td>
    40. 			tr>
    41. 			<tr>
    42. 				<th>出生日期：th>
    43. 				<td>
    44. 					<select name="birthyear">
    45. 						<option value="1999">1988
    46. 						<option value="2000" selected>2000
    47. 						<option value="2001">2001
    48. 						<option value="2002">2002
    49. 						<option value="2003">2003
    50. 						<option value="2004">2004
    51. 						<option value="2005">2005
    52. 						<option value="2006">2006
    53. 						<option value="2007">2007
    54. 					select>
    55. 					<select name="birthmother">
    56. 						<option value="1">1
    57. 						<option value="2" selected>2
    58. 						<option value="3">3
    59. 						<option value="4">4
    60. 						<option value="5">5
    61. 						<option value="6">6
    62. 						<option value="7">7
    63. 						<option value="8">8
    64. 						<option value="9">9
    65. 						<option value="10">10
    66. 						<option value="11">11
    67. 						<option value="12">12
    68. 					select>
    69. 					<select name="birthday">
    70. 						<option value="1">1
    71. 						<option value="2" selected>2
    72. 						<option value="3">3
    73. 						<option value="4">4
    74. 						<option value="5">5
    75. 						<option value="6">6
    76. 						<option value="7">7
    77. 						<option value="8">8
    78. 						<option value="9">9
    79. 						<option value="10">10
    80. 						<option value="11">11
    81. 						<option value="12">12
    82. 						<option value="13">13
    83. 						<option value="14">14
    84. 						<option value="15">15
    85. 						<option value="16">16
    86. 						<option value="17">17
    87.                      
    88. 					select>
    89. 				td>
    90. 			tr>
    91. 			<tr>
    92. 				
    93. 				<th>选修课程：th>
    94. 				<td>
    95. 					<input type="checkbox" name="course[]" value="4">Linux
    96. 					<input type="checkbox" name="course[]" value="5">Apache
    97. 					<input type="checkbox" name="course[]" value="6">Mysql
    98. 					<input type="checkbox" name="course[]" value="7">PHP
    99. 				td>
    100. 			tr>
    101. 			<tr>
    102. 				
    103. 					<th>自我评价：th>
    104. 					<td><textarea name="" rows="3" cols="35">textarea>td>			
    105. 			tr>
    106. 			<tr>
    107. 				
    108. 				<td colspan="2" align="center">	
    109. 					<input type="submit" name="submit" value="提交">
    110. 					<input type="reset" name="reset" value="重置">
    111. 				td>
    112. 			tr>
    113. 		form>
    114. 	table>
    115. body>
    116. html>
  • 相关阅读:
    Java面试八股文 2021年最新Java面试题及答案汇总
    Postman使用总结2
    秋染田野稻菽飘香 国稻种芯·中国水稻节：河北各地农业丰收
    drf-yasg 的 Swagger 文檔
    被微软收购后却惨遭下架，六年后我又开发新产品来抗衡
    Vue2和Vue3的emit、props、watch等知识点对比
    「格创东智」获数亿元B轮融资，深度聚焦半导体和新能源数智升级
    Clickhouse备份恢复_clickhouse-client方式backup命令之备份目录的设置
    PySCENIC（二）：pyscenic单细胞转录组转录因子分析
    【Spark NLP】第 7 章：分类和回归
  • 原文地址：https://blog.csdn.net/m0_52896041/article/details/128075334