首 页IT知识库收藏内容
当前位置:翔宇亭IT乐园IT知识库WEBHTML

HTML表单中的控件种类

减小字体 增大字体 作者:本站  来源:本站整理  发布时间:2023-07-06 15:18:41

在HTML表单中,可以包含多种控件方便用户实现数据的输入。

HTML <form>中的主要控件类型

在HTML<form></form>标签之间可以包含以下控件(元素)的一种或多种:

  • <button>:按钮控件(元素)
  • <datalist>:数据列表,可以为下拉框提供数据
  • <fieldset>:在表单中将相关数据组合在一起。
  • <input>:输入控件,通过设置type属性可以实现不同的输入形式,如文本、单选、复选等。
  • <label>:标签控件(元素),可以为输入数据添加标题。
  • <legend>:可以为<fieldset>元素定义标题
  • <select>:定义一个下拉列表。
  • <textarea>:定义多行文本框
  • <optgroup>:对<select>的列表项定义分组。
  • <option>:为<select>或<datalist>定义一个列表项。
  • <output>:定义一个计算的输出结果。

HTML表单中的元素

 <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

<label for="edu1">您的学历:</label>
<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

<label for="edu2">您的学历:</label>
<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

<label for="food">您常吃的一种食物:</label>
<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

<textarea name="txtC" rows="3" cols="20">
 翔宇亭IT乐园用心提供专业的IT知识。
</textarea>

在上面的示例代码中,rows属性用于定义文本区域可见的行数,cols属性用于定义文本区域可见宽度。

上面的代码在浏览器中的显示效果如下所示:

<datalist>元素

<datalist>元素用于为<input>元素预定义输入的可选内容列表。

当表单中的对应控件获得焦点时,预定义列表出现,并显示出预定义的数据供用户选择。

Example

<label for="editors">你常用的设计器</label>
<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

<form oninput="v.value=parseInt(x.value)+parseInt(y.value)">
  <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

微信搜索“优雅的代码”关注本站的公众号,或直接使用微信扫描下面二维码关注本站公众号,以获取最新内容。

个人成长离不开各位的关注,你的关注就是我继续前行的动力。

知识评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
愿您的精彩评论引起共鸣,带来思考和价值。
用户名: 查看更多评论
分 值:100分 90分 80分 70分 60分 40分 20分
内 容:
验证码:
关于本站 | 网站帮助 | 广告合作 | 网站声明 | 友情连接 | 网站地图
本站部分内容来自互联网,如有侵权,请来信告之,谢谢!
Copyright © 2007-2024 biye5u.com. All Rights Reserved.