美文网首页
html表单

html表单

作者: child_cool | 来源:发表于2018-04-19 00:58 被阅读19次
<!-- 表单域
    1.action 后台处理程序
    2.method 数据的提交方式
     -->
    <form action="1.php" method="get">

        <!-- 表单控件 input
        1.type: 文本格式(text) 密码(password) 单选控件(radio)多选控件(checkbox)资源上传控件(file)隐藏控件(hidden)
        2.name 字段名
        3.maxlength 最大长度
        4.readonly disabled 禁止输入
        5.value 默认文字
        6.id 编号
        7.checked 默认选中
         -->
         <!-- fieldset 分组控件 -->
         <!-- legend 标题 -->
    <fieldset>

        <legend>人员注册信息</legend>

        昵称:<input type="text" name="nick" maxlength="6" readonly disabled value="请输入昵称" id="">
        <br>
        密码:<input type="password" name="password" maxlength="6">
        <br>
        确认密码:<input type="password" name="">
        <br>

        性别: 
        <input type="radio" name="gender" checked> 男    
        <input type="radio" name="gender"> 女

        <br>

        <!-- 表单控件 下拉控件(select)
        1.option 选项
        2.selected 默认选中
        3.multiple 多选
         -->
        籍贯:

        <select>
            <option>山东</option>
            <option>河南</option>
            <option>河北</option>
            <option selected>广东</option>
        </select>
        其他写法:
        <select>
            <optgroup label="河北省">
                <option>张家口</option>
                <option>石家庄</option>
                <option>保定</option>
                <option>邯郸</option>
                <option>章北</option>
            </optgroup>
        </select>


        <br>

        爱好:
        <input type="checkbox">学习
        <input type="checkbox">lol
        <input type="checkbox">电影
        <input type="checkbox">吃
        
        <br>
        请上传图片:
        <input type="file" name="">

        <br>

        <!-- 多行文本域 -->
        个人简介:<textarea></textarea>

        <!-- 隐藏控件 -->
        <input type="hidden" name="" value="111">

        <br>
        <!-- 提交按钮 -->
        <input type="submit" name="">

        <br>
        <!-- 普通按钮 -->
        <input type="button" name="" value="按钮">

        <br>
        <!-- 重置按钮 -->
        <input type="reset" name="">
        <br>
        <!-- 图片提交按钮 -->
        <input type="image" name="" src="1.jpg">
    </fieldset>
    </form>

html5 中的标签

<!-- html5标签 -->
        <!-- 邮箱输入 -->
        <input type="email" name="">
        <br>
        <!-- 只能输入数字 -->
        <input type="number" name="" step="5">
        <br>
        <!-- url -->
        <input type="url" name="">
        <!-- 日期 -->
        <input type="date" name="">
        <!-- 时间 -->
        <input type="time" name="">
        <!-- 时间选择 -->
        <input type="datetime" name="">
        <!-- 周选择 -->
        <input type="week" name="">
        <!-- 取色器 -->
        <input type="color" name="">
        <!-- 滑块 -->
        <input type="range" name="" value="10">
        <!-- 搜索标签语义化 -->
        <input type="search" name="">
        <!-- 手机号 -->
        <input type="tel" name="">

其他标签

<input type="text" name="" list="dt">
       <datalist id="dt">
           <option value="bj">北京</option>
       </datalist>

html中的属性

<!-- 
           placeholder 提示文字
           autofocus 默认选中该输入框为输入状态
           autocomplete 输入记录 off关闭
           required 必须填写,否则不能提交
        -->
       <input type="text" name="" placeholder="提示文字" autofocus autocomplete="off" required>

相关文章

  • 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表单用法

    HTML form表单用于为用户输入创建 HTML 表单。收集用户不同类型的数据。 HTML Form 語法 表单...

网友评论

      本文标题:html表单

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