- ·上一篇内容:HTML form表单
- ·下一篇内容:HTML 表单中的按钮控件
HTML表单中的控件种类
在HTML表单中,可以包含多种控件方便用户实现数据的输入。
HTML <form>中的主要控件类型
在HTML<form>和</form>标签之间可以包含以下控件(元素)的一种或多种:
- <button>:按钮控件(元素)
- <datalist>:数据列表,可以为下拉框提供数据
- <fieldset>:在表单中将相关数据组合在一起。
- <input>:输入控件,通过设置type属性可以实现不同的输入形式,如文本、单选、复选等。
- <label>:标签控件(元素),可以为输入数据添加标题。
- <legend>:可以为<fieldset>元素定义标题
- <select>:定义一个下拉列表。
- <textarea>:定义多行文本框
- <optgroup>:对<select>的列表项定义分组。
- <option>:为<select>或<datalist>定义一个列表项。
- <output>:定义一个计算的输出结果。
<button>元素
<button>控件用于定义一个按钮。
用户通过点击按钮可以完成一定的处理操作。
Example
<button type="button" onclick="alert('您好!')">点击我</button>
上面的代码在浏览器中显示如下,读者点击该按钮时,将弹出“您好!”对话框。
<label>元素
Label控件为表单元素提供提示性标题。
Label控件常用的属性为for属性,该值给出label控件绑定的控件id值。
Example
<label for="yourName">姓名:</label>
<input type="text" id="yourName" name="yourName">
<label for="yourAddr">地址:</label>
<input type="text" id="yourAddr" name="yourAddr">
其在浏览器中的显示效果如下所示:
<input>元素
<input>元素是HTML表单中常用的一种元素。
通过设置不同type属性可以实现不同的输入形式。
Example
<p>
<label for="uid">用户ID</label>
<input type="text" id="uid" name="uid">
</p>
<p>
<label>性别</label>
<input type="radio" id="male" name="usex"><label for="male">男</label>
<input type="radio" id="female" name="usex"><label for="female">女</label>
</p>
<p>
<label>爱好</label>
<input type="checkbox" id="hb1" name="hobby"><label for="hb1">篮球</label>
<input type="checkbox" id="hb2" name="hobby"><label for="hb2">足球</label>
<input type="checkbox" id="hb3" name="hobby"><label for="hb3">乒乓球</label>
<input type="checkbox" id="hb4" name="hobby"><label for="hb4">排球</label>
</p>
其在浏览器中的预览效果如下:
<select>元素
在HTML 表单中,<select>元素用于定义一个下拉列表。
Example
<select id="edu1" name="edu1">
<option value="d">博士研究生</option>
<option value="p">硕士研究生</option>
<option value="u">本科</option>
<option value="j">专科</option>
<option value="o">其它</option>
</select>
其在浏览器中的显示效果如下所示:
在上面的代码中,<option>元素用于定义下拉列表中的项目。默认情况下,下拉列表中的第1项被选中。如果预先定义其它被选中的项,可以在对应的<option>中指定selected属性。
Example
<select id="edu2" name="edu2">
<option value="d">博士研究生</option>
<option value="p">硕士研究生</option>
<option value="u" selected>本科</option>
<option value="j">专科</option>
<option value="o">其它</option>
</select>
上面的代码其在浏览器中的显示效果如下:
<optgroup>元素
<optgroup>元素可以对<select>元素中的列表项进行分组。
Example
<select id="food" name="food">
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</optgroup>
<optgroup label="坚果">
<option value="walnut" selected>核桃</option>
<option value="chestnut">栗子</option>
</optgroup>
</select>
其在浏览器中的显示效果如下:
<textarea>元素
在HTML中,<textarea>元素用于定义一个多行文本输入域。
Example
翔宇亭IT乐园用心提供专业的IT知识。
</textarea>
在上面的示例代码中,rows属性用于定义文本区域可见的行数,cols属性用于定义文本区域可见宽度。
上面的代码在浏览器中的显示效果如下所示:
<datalist>元素
<datalist>元素用于为<input>元素预定义输入的可选内容列表。
当表单中的对应控件获得焦点时,预定义列表出现,并显示出预定义的数据供用户选择。
Example
<input type="text" list="elist">
<datalist id="elist">
<option value="记事本">
<option value="VScode">
<option value="Editplus">
<option value="HBuilider X">
</datalist>
在上面的代码中可以看出,在输入控件<input>中使用list属性给出预先定义的值列表,该属性对应的值是datalist元素的id属性值。
上面代码在浏览器中的显示效果如下:
<output>元素
output元素用于显示计算结果。一般需要结合Javascript脚本来实现。
Example
<input type="number" id="x" name="x" value="20">
+
<input type="number" id="y" name="y" value="30">
=
<output name="v" for="x y">50</output>
</form>
上面这段代码实现两个整数的相加,并在output中显示其结果。
其在浏览器中的显示效果如下:
读者可以点击这里查看本文例子演示效果。
如对以上内容有疑问或文中有错误之处,请留言指出。如需转载,请注明出处:翔宇亭IT乐园(http://www.biye5u.com),并给出本文的链接地址:http://www.biye5u.com/article/html5/2023/6606.html。
微信搜索“优雅的代码”关注本站的公众号,或直接使用微信扫描下面二维码关注本站公众号,以获取最新内容。
个人成长离不开各位的关注,你的关注就是我继续前行的动力。