HTML表单基础:<option>标记与表单提交方式
本文主要介绍了HTML中的`<option>`标记,它是用于定义列表框或下拉菜单中的选项。`<option>`标记必须放在`<select>`标记内部,并且可以设置`VALUE`和`SELECTED`两个属性。`VALUE`属性定义了当用户选择该选项时,提交给服务器的数据。如果未指定,浏览器会使用选项的内容作为数据。`SELECTED`属性则用来设定选项的初始状态,使其在页面加载时即被选中。 表单是HTML中的关键元素,它允许用户与Web服务器进行交互。表单有两种运行方式:GET和POST。GET方法将表单数据附加到URL,适用于小量数据且不涉及隐私的信息传递,但URL长度有限制。POST方法则将数据包含在HTTP请求体中,适合大量数据或敏感信息的传输。 `<form>`标记是定义表单的主体,包含ACTION和METHOD属性。ACTION属性指定了处理表单数据的服务器端程序的URL,而METHOD属性定义了表单数据的提交方式,可选GET或POST。例如,`<form ACTION="Default.aspx" METHOD="post">`表示表单数据会通过POST方式提交到名为Default.aspx的处理程序。 此外,`<input>`标记用于创建各种类型的输入控件,如文本字段、复选框等。`NAME`属性为控件定义了一个唯一标识,`TYPE`属性则定义了控件的类型,如文本(`text`)、密码(`password`)、单选按钮(`radio`)等。其他属性如`VALUE`可以设定控件的初始值,`CHECKED`用于设置单选按钮或复选框的初始选中状态。 HTML的表单元素和属性是构建交互式网页的关键,它们为用户提供输入数据和与服务器交换信息的界面,而`<option>`、`<form>`和`<input>`则是实现这一功能的核心元素。理解这些标记的使用和属性的含义,对于创建功能丰富的Web应用程序至关重要。
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++){ var cell = row.insertCell(i); cell.innerHTML = '<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </head> <body>
列1 | 列2 | 列3 | 列4 | 列5 |
---|---|---|---|---|
<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> | <select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select> |
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/a34c10140a704c608ed049060cdb42b5_weixin_42196750.jpg!1)
- 粉丝: 22
- 资源: 2万+
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)