时间：2023-07-26 14:36:02 | 来源：网站运营
时间：2023-07-26 14:36:02 来源：网站运营
HTML5创建表单（上）：
在线咨询
<form></form>。表单的基本语法格式如下：1<form action="url" method="get|post" enctype="mime">2</form>其中，action指定处理提交表单的格式，它可以是一个URL或者一个电子邮箱地址；method指明提交表单的HTTP方法。enctype指明用来把表单提交给服务器时的互联网网媒体形式。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的基本使用</title> 6</head> 7<body> 8 <form> 9 下面是输入用户登录信息<br>10 用户名称11 <input type="text" name="user" ><br>12 用户密码13 <input type="password" name="password" ><br>14 15 <input type="submit" value="登录">16 17 <input type="reset" value="重置">18</form>19</body>20</html>渲染出来的效果如下：text1<input type="text" name="..." size="..." maxlength="..." value="...">下面对这些属性进行一个简单的说明，type="text"定义单行文本输入框，name定义文本框的名称，为了保证数据采集的准确性，故而要定义一个独一无二的名称；size属性定义文本框的宽度，单位是单个字符宽度；maxlength定义最多输入的字符数；value属性定义文本框的初始值。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的基本使用</title> 6</head> 7<body> 8 <form> 9 用户名称:<br>10 <input type="text" name="username" size="20" maxlength="15" ><br>11 用户地址:<br>12 <input type="text" name="address" size="20" maxlength="15" ><br>13</form>14</body>15</html>渲染结果如下：textareatextarea主要用来输入比较长的文本信息，代码格式如下：1<textarea name="..." cols="..." rows="..." wrap="...">2</textarea>主要新出现的属性，cols定义多行文本框的宽度，单位是单个字符宽度；rows多行文本框的高度，单位是单个字符高度；wrap属性定义输入内容大于文本域是显示的方式。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的基本使用</title> 6</head> 7<body> 8 <form> 9 你对本网站的建议是：<br>10 <textarea name="advice" cols="50" rows="5"></textarea>11 <br>12 <input type="submit" value="提交">13 </form>14</body>15</html>渲染之后得结果：password1<input type="password" name="..." size="..." maxlength="...">前面有过类似的例子，在此就不重复了。radio1<input type="radio" name="..." value="...">其中，type="radio"定义单选按钮；name定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选项都必须用同一名称。1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的基本使用</title> 6</head> 7<body> 8 <form> 9 请选择你感兴趣的图书类型：<br> <!-- 单选按钮radio-->10 <input type="radio" name="book" value="Book1">网站编程<br>11 <input type="radio" name="book" value="Book2">办公软件<br>12 <input type="radio" name="book" value="Book3">设计软件<br>13 <input type="radio" name="book" value="Book4">网络管理<br>14 <input type="radio" name="book" value="Book5" checked>黑客攻防<br>15 </form>16</body>17</html>渲染结果如下：checkbox1<input type="checkbox" name="..." value="...">看如下一个例子：1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的基本使用</title> 6</head> 7<body> 8 <form> 9 请选择你感兴趣的图书类型：<br> <!-- 复选框checkbox-->10 <input type="checkbox" name="book" value="Book1">网站编程<br>11 <input type="checkbox" name="book" value="Book2">办公软件<br>12 <input type="checkbox" name="book" value="Book3">设计软件<br>13 <input type="checkbox" name="book" value="Book4">网络管理<br>14 <input type="checkbox" name="book" value="Book5" checked>黑客攻防<br>15 </form>16</body>17</html>渲染结果如下：<select>1<select name="..." size="..." multiple>2 <option value="..." selected>3 ...4 </option>5 ...6</select>看如下一个例子：1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表单的基本使用</title> 6</head> 7<body> 8 <form> 9 请选择你感兴趣的图书类型：<br> <!-- 选择列表标记select-->10 <select name="fruit" size="3" multiple>11 <option value="BOOK1">网站编程</option>12 <option value="BOOK2">办公软件</option>13 <option value="BOOK3">设计软件</option>14 <option value="BOOK4">网络管理</option>15 <option value="BOOK5">黑客攻防</option>16 </select>17 <br/>18</body>19</html>渲染结果如下：button1<input type="button" name="..." value="..." onclick="...">其中onclick属性表示单击行为，也可以通过指定脚本函数（如JavaScript）来定义按钮的行为，这个我们到JavaScript部分就会十分清楚了。submit1<input type="submit" name="..." value="...">这个前面也有相关例子，在此不再复述。reset1<input type="reset" name="..." value="...">这个前面也提到过，不再重复。关键词：创建
