美文网首页
HTML(五)表单

HTML(五)表单

作者: InsaneLoafer | 来源:发表于2021-10-08 09:26 被阅读0次

表单

  • 作用:用于收集用户信息,进行人机交互操作
  • 包含元素:文本框、单选按钮、列表框、图片框、复选框等。这些元素,统称"控件"
  • 示例:


控件的常用属性

  • name名字允许重复代表一组操作,且用于前端
  • id名字不允许重复,且用于后端
  • 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
    <form action="" method="">
        <label>请输入姓名:</label>
            <input type="text" name="" id=""><br>
        <label>请输入密码:</label>
            <input type="password" name="" id=""><br>
        <label>再次输入密码:</label>
            <input type="password" name="" id=""><br>
        <label>性别:</label>
            <input type="radio" name="sex" id="" value="男">
                <label>男</label>
            <input type="radio" name="sex" id="" value="女">
                <label>女</label><br>
        <label>兴趣爱好</label>
            <input type="checkbox" name="" id="" value="游泳">
                <label>游泳</label>
            <input type="checkbox" name="" id="" value="看书">
                <label>看书</label>
            <input type="checkbox" name="" id="" value="爬山">
                <label>爬山</label>
            <input type="checkbox" name="" id="" value="思考">
                <label>思考</label><br>
        <label>生日:</label>
            <select>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <!--默认选中-->
                <option value="1997" selected="selected">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
            </select>年
            <select>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
            </select>月
            <select>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
            </select>日<br>
            头像<img src="image/headlogo/3.jepg">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select><br>
            <input type="button" name="普通按钮">
            <!--submit提交按钮会进入后台-->
            <input type="submit" name="提交按钮">
    </form>

</body>
</html>

表单其他控件

  • 普通列表框(非下拉列表框)
  • 隐藏域
  • 上传控件
  • 多行文本框

多行文本框

<textarea rows="5" cols="30" name="" id="">请输入</textarea>

上传

<input type="file" name=""><input type="button" name="" value="上传">

隐藏域(隐藏文本框)

000<input type="hidden" name="" id="">000
  • 主要作用是信息传递,比如前段的信息不方便显示,但是要后端得到,或者后台的数据要在前端得到

普通文本框

  • 能够展示所有选项
  • size:指定能够展示的选项数
  • multiple:指定多选数目
    <select size="4" multiple="4">
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
    </select>

相关文章

  • HTML(五)表单

    表单 作用:用于收集用户信息,进行人机交互操作 包含元素:文本框、单选按钮、列表框、图片框、复选框等。这些元素,统...

  • HTML表单的简单用法

    HTML表单的简单用法:HTML表单用于搜集不同类型的用户输入。 元素定义HTML表单。HTML表单包含表单元素。...

  • 简单介绍 HTML 表单的用法

    HTML 表单用于收集用户输入, 元素定义 HTML 表单。HTML 表单包含表单元素,表单元素指的是不同类型的...

  • HTML表单的用法

    html表单用于搜集不同类型的用户输入。

    元素 form元素定义html表单 HTML 表单包含表单元...

  • HTML学习笔记(四)

    一:HTML 表单 HTML 表单用于搜集不同类型的用户输入。 元素 HTML 表单用于收集用户输入。 HTML ...

  • HTML 表单的用法

    HTML 表单用于搜集不同类型的用户输入 元素定义 HTML 表单: 所有属性如下 HTML 表单包含表单元素表...

  • 08-表单

    本节案例 表单的作用 HTML 表单用于收集用户输入。 表单form 元素定义 HTML 表单,里面需要有各种表单...

  • Django学习-第十三讲(下):表单(一)forms.form

    1. html表单和django中的表单的区别 HTML中的表单: 单纯从前端的html来说,表单是用来提交数据给...

  • HTML4.01+CSS2.0教程(七)

    3/6/2017 12:33:03 PM html表单 html表单用于收集用户输入,而 元素用于定义html表单...

  • HTML表单介绍

    HTML 表单用于搜集不同类型的用户输入, 元素定义 HTML 表单;HTML 表单包含不同类型的 input ...

网友评论

      本文标题:HTML(五)表单

      本文链接:https://www.haomeiwen.com/subject/yzfynltx.html