• 技术文章 >web前端 >前端问答

    html表单有哪些标记

    青灯夜游青灯夜游2021-06-08 15:11:56原创67

    html表单标记:“<form>”、“<input>”、“<textarea>”、“<label>”、“<fieldset>”、“<legend>”、“<select>”、“<option>”、“<button>”、“<output>”等。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    HTML 表单用于收集不同类型的用户输入。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

    html表单的标记:

    标记描述
    <form>定义供用户输入的表单
    <input>定义输入域
    <textarea>定义文本域 (一个多行的输入控件)
    <label>定义了 <input> 元素的标签,一般为输入标题
    <fieldset>定义了一组相关的表单元素,并使用外框包含起来
    <legend>定义了 <fieldset> 元素的标题
    <select>定义了下拉选项列表
    <optgroup>定义选项组
    <option>定义下拉列表中的选项
    <button>定义一个点击按钮
    <datalist>指定一个预先定义的输入控件选项列表
    <keygen>定义了表单的密钥对生成器字段
    <output>定义一个计算结果

    扩展资料:<input> 元素

    <input> 元素是最重要的表单元素。

    <input> 元素有很多形态,根据不同的 type 属性。

    1、文本域(Text Fields)

    文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>

    浏览器显示如下:

    1.png

    注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。

    2、密码字段

    密码字段通过标签<input type="password"> 来定义:

    <form>
    Password: <input type="password" name="pwd">
    </form>

    浏览器显示效果如下:

    2.png

    注意:密码字段字符不会明文显示,而是以星号或圆点替代。

    3、单选按钮(Radio Buttons)

    <input type="radio"> 标签定义了表单单选框选项

    <form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>

    浏览器显示效果如下:

    3.png

    4、复选框(Checkboxes)

    <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

    <form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
    </form>

    浏览器显示效果如下:

    4.png

    5、提交按钮(Submit Button)

    <input type="submit"> 定义了提交按钮.

    当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>

    浏览器显示效果如下:

    5.png

    假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

    推荐教程:《html视频教程

    以上就是html表单有哪些标记的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html 表单
    上一篇:css系统是什么 下一篇:html怎么让图片变亮
    第16期线上培训班

    相关文章推荐

    • html中图片显示不出来怎么办• flash和html5的区别有哪些• HTML标签如何才能去除• html如何定义错误提示• jquery中html()方法怎么用• html中的video无法播放怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网