“HTML Form表单”的版本间差异
本页内容
(创建页面,内容为“HTML 表单用于收集用户输入。用户输入常被发送到服务器进行处理。 <form action="/http.php" method="GET"> <label for="fname">姓名:</label><br> <input type="text" id="fname" name="fname" value="小白"><br> <label for="age">年龄:</label><br> <input type="text" id="age" name="age" value="1"><br><br> <input type="submit" value="提交"> </form>”) |
(→试试看) |
||
(未显示同一用户的14个中间版本) | |||
第1行: | 第1行: | ||
HTML | [[Category:HTML教程|44]] | ||
HTML 表单用于收集用户输入。将用户输入的内容发送到服务器进行处理。 | |||
== 试试看 == | |||
<html> | |||
<form action="/third/http.php" method="POST" target="_blank"> | |||
<label for="fname">姓名:</label><br> | |||
<input type="text" id="fname" name="fname" value="小白"><br> | |||
<label for="age">年龄:</label><br> | |||
<input type="text" id="age" name="age" value="1"><br><br> | |||
<input type="submit" value="提交"> | |||
</form> | |||
</html> | |||
<sample title="" desc="" hererun="s2"> | |||
<html> | |||
<form action="/third/http.php" method="GET"> | |||
<label for="fname">姓名:</label><br> | |||
<input type="text" id="fname" name="fname" value="小白"><br> | |||
<label for="age">年龄:</label><br> | |||
<input type="text" id="age" name="age" value="1"><br><br> | |||
<input type="submit" value="提交"> | |||
</form> | |||
</html> | |||
</sample> | |||
== <nowiki><form></nowiki> 元素 == | |||
<nowiki><form></nowiki>元素用于为用户输入创建 HTML 表单: | |||
<sample title="" desc=""> | |||
<form> | |||
. | |||
form elements | |||
. | |||
</form> | |||
</sample> | |||
<nowiki><form></nowiki>的元素是不同类型输入元素的容器,例如:文本字段、复选框、单选按钮、提交按钮等。 | |||
== <nowiki><input></nowiki> 元素 == | |||
HTML<nowiki><input></nowiki>元素是最常用的表单元素。 | |||
一个<nowiki><input></nowiki>元素可以通过多种方式显示,具体取决于type 属性。 | |||
* <nowiki><input type="text"></nowiki> 显示单行文本输入字段 | |||
* <nowiki><input type="radio"></nowiki> 显示一个单选按钮 | |||
* <nowiki><input type="checkbox"></nowiki> 显示一个复选框 | |||
* <nowiki><input type="submit"></nowiki> 显示提交按钮 | |||
* <nowiki><input type="button"></nowiki> 显示一个可点击按钮 | |||
<sample title="" desc="" hererun="s3"> | |||
<form action="/third/http.php" method="GET"> | |||
<label for="fname">姓名:</label><br> | |||
<input type="text" id="fname" name="fname" value="小白"><br> | |||
<label for="age">性别:</label><br> | |||
<input type="radio" name='gender' value="female">女 | |||
<input type="radio" name='gender' value="male">男 | |||
<input type="submit" value="提交"> | |||
</form> | |||
</sample> | |||
== <nowiki><label></nowiki> 元素 == | |||
👆🏻上面的例子种使用了label。 | |||
<nowiki><label></nowiki>元素对屏幕阅读器用户很有用,因为当用户关注输入元素时,屏幕阅读器会大声读出标签。 | |||
<nowiki><label></nowiki>元素还可以帮助难以单击非常小的区域(例如单选按钮或复选框)的用户 - 因为当用户单击<nowiki><label></nowiki>元素内的文本时,它会切换单选按钮/复选框。 | |||
<nowiki><label>标签的for属性应该等于<input>元素的id属性这样才能将它们绑定在一起。</nowiki> | |||
== 单选按钮 radio == | |||
<nowiki><input type="radio"></nowiki>定义一个单选按钮。单选按钮让用户选择多个选项中的一个,比如上面例子中让用户选择性别,可选选项有两个,但用户只能选择一个。 | |||
<sample title="" desc="" hererun="radio"> | |||
<p>选择您喜欢的网络语言:</p> | |||
<form> | |||
<input type="radio" id="html" name="fav_language" value="HTML"> | |||
<label for="html">HTML</label><br> | |||
<input type="radio" id="css" name="fav_language" value="CSS"> | |||
<label for="css">CSS</label><br> | |||
<input type="radio" id="javascript" name="fav_language" value="JavaScript"> | |||
<label for="javascript">JavaScript</label> | |||
</form> | |||
</sample> | |||
== 复选框 checkbox == | |||
<nowiki><input type="checkbox"></nowiki>定义了一个复选框。复选框让用户在多个选项中选择零个或更多选项。 | |||
<sample title="" desc="" hererun="checkbox"> | |||
<h2>我经常用的交通工具</h2> | |||
<form> | |||
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> | |||
<label for="vehicle1"> 自行车</label><br> | |||
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> | |||
<label for="vehicle2"> 汽车</label><br> | |||
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> | |||
<label for="vehicle3"> 船</label> | |||
</form> | |||
</sample> | |||
== 提交按钮 == | |||
<nowiki><input type="submit"></nowiki>定义了一个用于将表单数据提交给表单处理程序的按钮。表单处理程序通常是服务器上的一个文件,其中包含用于处理输入数据的脚本。表单处理程序在表单的action 属性中指定。比如这章一开始的例子。 | |||
<form action="/http.php" method="GET"> | <html> | ||
<form action="/third/http.php" method="GET"> | |||
<label for="fname">姓名:</label><br> | <label for="fname">姓名:</label><br> | ||
<input type="text" id="fname" name="fname" value="小白"><br> | <input type="text" id="fname" name="fname" value="小白"><br> | ||
第8行: | 第112行: | ||
<input type="submit" value="提交"> | <input type="submit" value="提交"> | ||
</form> | </form> | ||
</html> |
2022年8月14日 (日) 20:25的最新版本
HTML 表单用于收集用户输入。将用户输入的内容发送到服务器进行处理。
试试看
示例
<html>
<form action="/third/http.php" method="GET">
<label for="fname">姓名:</label><br>
<input type="text" id="fname" name="fname" value="小白"><br>
<label for="age">年龄:</label><br>
<input type="text" id="age" name="age" value="1"><br><br>
<input type="submit" value="提交">
</form>
</html>
<form> 元素
<form>元素用于为用户输入创建 HTML 表单:
示例
<form>
.
form elements
.
</form>
<form>的元素是不同类型输入元素的容器,例如:文本字段、复选框、单选按钮、提交按钮等。
<input> 元素
HTML<input>元素是最常用的表单元素。
一个<input>元素可以通过多种方式显示,具体取决于type 属性。
- <input type="text"> 显示单行文本输入字段
- <input type="radio"> 显示一个单选按钮
- <input type="checkbox"> 显示一个复选框
- <input type="submit"> 显示提交按钮
- <input type="button"> 显示一个可点击按钮
示例
<form action="/third/http.php" method="GET">
<label for="fname">姓名:</label><br>
<input type="text" id="fname" name="fname" value="小白"><br>
<label for="age">性别:</label><br>
<input type="radio" name='gender' value="female">女
<input type="radio" name='gender' value="male">男
<input type="submit" value="提交">
</form>
<label> 元素
👆🏻上面的例子种使用了label。
<label>元素对屏幕阅读器用户很有用,因为当用户关注输入元素时,屏幕阅读器会大声读出标签。
<label>元素还可以帮助难以单击非常小的区域(例如单选按钮或复选框)的用户 - 因为当用户单击<label>元素内的文本时,它会切换单选按钮/复选框。
<label>标签的for属性应该等于<input>元素的id属性这样才能将它们绑定在一起。
单选按钮 radio
<input type="radio">定义一个单选按钮。单选按钮让用户选择多个选项中的一个,比如上面例子中让用户选择性别,可选选项有两个,但用户只能选择一个。
示例
<p>选择您喜欢的网络语言:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
复选框 checkbox
<input type="checkbox">定义了一个复选框。复选框让用户在多个选项中选择零个或更多选项。
示例
<h2>我经常用的交通工具</h2>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> 自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> 汽车</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> 船</label>
</form>
提交按钮
<input type="submit">定义了一个用于将表单数据提交给表单处理程序的按钮。表单处理程序通常是服务器上的一个文件,其中包含用于处理输入数据的脚本。表单处理程序在表单的action 属性中指定。比如这章一开始的例子。