HTML 表单元素

简介

表单元素用于用户输入的表单数据,如填写和提交资料。

标签

标签 说明
form 供用户输入的 HTML 表单
button 标签定义一个按钮
fieldset 用于表单内的相关元素分组,元素会被边框包围
legend 为 <fieldset> 元素定义标题
input 定义了输入数据的字段
label 为 <input> 元素定义标注, 通过 for=”id” 属性与 <input> 元素 id 值关联,在点击label时会自动将焦点移动到绑定的元素上
select 下拉列表元素
optgroup 下拉列表元素
option 下拉列表元素
textarea 定义一个多行的文本输入控件

实例

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单演示</title>
</head>
<body>
<form>
    <fieldset>
        <legend>个人信息:</legend>
        <label for="name">姓名</label>
        <input type="text" size="30"  id="name"><br>
        <label for="email">电邮</label>
        <input type="text" size="30" id="email"><br>
        <label for="birthday">生日</label>
        <input type="text" size="10" id="birthday"><br>
        <label for="carlist">汽车</label>
        <select id="carlist">
        <option value="car">汽车</option>
        <option value="bike">单车</option>
        <option value="train">火车</option>
        <option value="truck">货车</option>
        </select>
        <label for="animal">动物</label>
        <select id="animal">
            <optgroup label="昆虫">
                <option value="flies">苍蝇</option>
                <option value="butterfly">蝴蝶</option>
            </optgroup>
            <optgroup label="爬行动物">
                <option value="horse">马</option>
                <option value="tiger">老虎</option>
            </optgroup>
        </select>
        <br>
        <textarea style="width:500px;height:100px">TXTech 是一个免费技术教程网站,包含各个开发领域;</textarea>

    </fieldset>
    <input type="submit" value="提交资料">
</form>
</body>
</html>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注