HTML表单选择文件是一种常见的用户界面元素,它允许用户从本地文件系统中选择文件,并将其上传到服务器。它可以用于上传图片、文档、视频和其他文件。
<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload File" name="submit"> </form>
上面的代码是一个使用 HTML 表单选择文件的例子。它包含一个 input 元素,该元素的 type 属性设置为 file,这样就可以在浏览器中显示一个“选择文件”按钮。此外,还必须将 form 的 enctype 属性设置为 multipart/form-data,这样才能正确处理上传的数据。
当用户单击“选择文件”按钮时,浏览器会显示一个标准的文件浏览对话框,用户可以使用它来浏览本地文件并选择要上传的文件。当用户选择了要上传的文件后,浏览器将该文件放在 input 元素中并提交表单。然后服务器端代码就可以处理该表单数据并把上传的文件放到服务器上。
HTML 表单选择文件极大地方便了 Web 应用开发者,因为它不需要开发者去写复杂的 JavaScript 代码来实现这一功能。而且它也很容易使用:开发者只需要在 HTML 表单中包含一个 input 元素就可以了。
select
元素创建用户选择的选项列表。
select
具有局部属性: name,disabled,form,size,multiple,autofocus,required
。它可以包含 contentsoption
和 optgroup
元素。
HTML5中的form,autofocus 和 required属性是新增的。
name,disabled,form,autofocus 和 required 属性与输入元素的工作方式相同。
size
属性指定要向用户显示的选项数。
multiple属性允许用户选择多个值。
您可以使用option
元素来定义要向用户显示的选项。
以下代码显示如何使用select和option元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave"> Favorite Fruit:
<select id="fave"name="fave">
<option value="A" selected label="Apples">Apples</option>
<option value="B" label="Batch">Batch</option>
<option value="C" label="C">C</option>
<option value="S" label="SQL">SQL</option>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
您可以使用select元素上的size
属性向用户显示多个选项,并使用multiple属性允许用户选择多个选项。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave" style="vertical-align: top"> Favorite
Fruit: <select id="fave" name="fave" size="5" multiple>
<option value="a" selected label="Apples">Apples</option>
<option value="o" label="Oracle">Oracle</option>
<option value="c" label="C">C</option>
<option value="p" label="Pascal">Pascal</option>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
您可以使用select元素上的 size
属性向用户显示多个选项,以及允许用户的多个属性以选择多个选项。...
它具有局部属性:label,disabled和包含option
元素。
您可以使用 optgroup
元素将option
元素分组在一起。
label
属性允许您为已分组的选项创建标题。
disabled
属性使选项元素不可选。
以下代码显示正在使用的optgroup元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave" style="vertical-align: top"> Favorite
Fruit: <select id="fave" name="fave">
<optgroup label="Top Choices">
<option value="apples" label="Apples">Apples</option>
<option value="oranges" label="Oranges">Oranges</option>
</optgroup>
<optgroup label="Others">
<option value="cherries" label="Cherries">Cherries</option>
<option value="pears" label="Pears">Pears</option>
</optgroup>
</select>
</label>
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
optgroup
标签仅用于结构;用户不能选择这些值作为值。
以下代码显示了如何使用disabled选项创建选项组。
<html>
<body>
<form action="" method="get" name="frmInfo">
Please select the product you are interested in:<br /> <select
name="selInformation">
<option disabled="disabled" value="">-- Hardware --</option>
<option value="Desktop">Desktop computers</option>
<option value="Laptop">Laptop computers</option>
<option disabled="disabled" value="">-- Software --</option>
<option value="OfficeSoftware">Office software</option>
<option value="Games">Games</option>
<option disabled="disabled" value="">-- Peripherals --</option>
<option value="Monitors">Monitors</option>
<option value="InputDevices">Input Devices</option>
<option value="Storage">Storage</option>
</select> <br />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
HTML fieldset要将一些元素组合在一起,您可以使用 fieldset 元素。它具有局部属性: name,form,disabled 。您可以在以下代码中...
HTML 颜色值 颜色由红 (R)、绿 (G)、蓝 (B) 组成。颜色值 颜色值由十六进制来表示红、绿、蓝(RGB)。 每个颜色的最低值为 0 (十...
由于XHTML是一个XML应用程序,所以必须改变在基于SGML的HTML 4中完全合法的某些实践。在前面的章节中你已经看到了XHTML语法,所...
React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI,很人多认为 React 是 MVC 中的 V(视图)。React 起源于 F...
原文在:http://www.aosabook.org/en/distsys.htmlKate Matsudaira开源软件如今已成为最大的一些网站的基础组件。随着这些网站的...
现有版本还是比较粗的翻译...原文地址:http://www.aosabook.org/en/openmpi.html作者:Jeffrey M. Squyres15.1. BackgroundOpen...