小白教程
所有教程
关于
Search
172.70.175.184
172.70.175.184
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML 表单元素”的源代码
本页内容
上一节:
HTML_Form属性
下一节:
HTML_表单Input类型
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|46]] HTML''' <nowiki><form></nowiki> '''元素可以包含以下一个或多个表单元素: * ''' <nowiki><input></nowiki> ''' * ''' <nowiki><label></nowiki> ''' * ''' <nowiki><select></nowiki> ''' * ''' <nowiki><textarea></nowiki> ''' * ''' <nowiki><button></nowiki> ''' * ''' <nowiki><fieldset></nowiki> ''' * ''' <nowiki><legend></nowiki> ''' * ''' <nowiki><datalist></nowiki> ''' * ''' <nowiki><output></nowiki> ''' * ''' <nowiki><option></nowiki> ''' * ''' <nowiki><optgroup></nowiki> ''' == <input> 元素 == 最常用的表单元素之一是''' <nowiki><input></nowiki> '''元素。 元素可以通过''' <nowiki><input></nowiki> '''多种方式显示,具体取决于''' <nowiki>type</nowiki> ''' 属性。 <sample title="" hererun="s1" desc="" > <form action="/third/http.php" method="GET"> <label for="fname">名字:</label> <input type="text" id="fname" name="fname"> <input type="submit" value="提交"> </form> </sample> == <label> 元素 == ''' <nowiki><label></nowiki> '''元素定义了几个表单元素的标签。 ''' <nowiki><label></nowiki> '''元素对屏幕阅读器用户很有用,因为当用户关注输入元素时,屏幕阅读器会大声读出标签。 ''' <nowiki><label></nowiki> '''元素还可以帮助难以单击非常小的区域(例如单选按钮或复选框)的用户 - 因为当用户单击''' <nowiki><label></nowiki> '''元素内的文本时,它会切换单选按钮/复选框。 标签的''' <nowiki>for</nowiki> '''属性''' <nowiki><label></nowiki> '''应该等于元素的''' <nowiki>id</nowiki> '''属性''' <nowiki><input></nowiki> ''' 才能将它们绑定在一起。 == <select> 元素 == 该''' <nowiki><select></nowiki> '''元素定义了一个下拉列表: <sample title="" hererun="s" desc="" > <label for="cars">选择一辆车:</label> <select id="汽车" name="汽车"> <option value="volvo">沃尔沃</option> <option value="saab">萨博</option> <option value="fiat">法币</option> <option value="audi">奥迪</option> </select> </sample> 这些''' <nowiki><option></nowiki> '''元素定义了一个可以选择的选项。 默认情况下,下拉列表中的第一项被选中。 要定义预选选项,请将''' <nowiki>selected</nowiki> '''属性添加到选项: <sample title="" hererun="s" desc="" > <option value="fiat" selected>菲亚特</option> </sample> === 有效值: === 使用''' <nowiki>size</nowiki> '''属性指定可见值的数量: <sample title="" hererun="s" desc="" > <label for="cars">选择一辆车:</label> <select id="cars" name="cars" size="3"> <option value="volvo">沃尔沃</option> <option value="saab">萨博</option> <option value="fiat">法币</option> <option value="audi">奥迪</option> </select> </sample> === 允许多选: === 使用该''' <nowiki>multiple</nowiki> '''属性允许用户选择多个值: <sample title="" hererun="s" desc="" > <label for="cars">选择一辆车:</label> <select id="cars" name="cars" size="4" 多个> <option value="volvo">沃尔沃</option> <option value="saab">萨博</option> <option value="fiat">法币</option> <option value="audi">奥迪</option> </select> </sample> == <nowiki><textarea> 元素</nowiki> == 该''' <nowiki><textarea></nowiki> '''元素定义了一个多行输入字段(一个文本区域): <sample title="" hererun="s" desc="" > <textarea name="message" rows="10" cols="30"> 猫在花园里玩耍。 </textarea> </sample> 该''' <nowiki>rows</nowiki> '''属性指定文本区域中可见的行数。 该''' <nowiki>cols</nowiki> '''属性指定文本区域的可见宽度。 这就是上面的 HTML 代码在浏览器中的显示方式: <html> <textarea name="message" rows="10" cols="30"> 猫在花园里玩耍。 </textarea> </html> 您还可以使用 CSS 定义文本区域的大小: <sample title="" hererun="s" desc="" > <textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea> </sample> == <nowiki><button> 元素</nowiki> == 该''' <nowiki><button></nowiki> '''元素定义了一个可点击的按钮: <sample title="" hererun="s" desc="" > <button type="button" onclick="alert('Hello World!')">Click Me!</button> </sample> 这就是上面的 HTML 代码在浏览器中的显示方式: <button type="button" onclick="alert('Hello World!')">Click Me!</button> <blockquote> 始终指定''' <nowiki>type</nowiki> '''按钮元素的属性。不同的浏览器可能对按钮元素使用不同的默认类型。 </blockquote> == <nowiki><fieldset> 和 <legend></nowiki> 元素 == ''' <nowiki><fieldset></nowiki> '''元素用于对表单中的相关数据进行分组。 ''' <nowiki><legend></nowiki> '''元素定义了该元素的标题''' <nowiki> <fieldset></nowiki> ''' 。 <sample title="" hererun="s" desc="" > <form action="/third/http.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form> </sample> 这就是上面的 HTML 代码在浏览器中的显示方式: <html> <form action="/third/http.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form> </html> == <nowiki><datalist></nowiki> 元素 == ''' <nowiki><datalist></nowiki> '''元素指定元素的预定义选项列表''' <nowiki><input></nowiki> '''。 用户在输入数据时将看到预定义选项的下拉列表。 元素的''' <nowiki>list</nowiki> '''属性''' <nowiki><input></nowiki> ''',必须引用元素的 ''' <nowiki>id</nowiki> '''属性''' <nowiki><datalist></nowiki> '''。 <sample title="" hererun="s" desc="" > <form action="/third/http.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> </sample> == <nowiki><output></nowiki> 元素 == ''' <nowiki><output></nowiki> '''元素表示计算的结果(如脚本执行的计算)。 <sample title="" hererun="s" desc="执行计算并将结果显示在输出元素中:" > <form action="/third/http.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> </sample>
返回至“
HTML 表单元素
”。
上一节:
HTML_Form属性
下一节:
HTML_表单Input类型