zoukankan      html  css  js  c++  java
  • 9月8日HTML表单元素(form、文本、按钮、选择)

    表单元素

    一、form

          form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。<form> 标签用于为用户输入创建 HTML 表单。表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、type、name、value等元素。表单用于向服务器传输数据。

    1.action

        action 属性规定当提交表单时,向何处发送表单数据,把数据提交给哪个网站。

    2.method

        method表示数据提交方式,提交方式有两种:

            get—显式提交,有长度限制。

            post—隐式提交

    3.target

        target表示提交方式,提交方式主要有以下几项。

            _blank:在新窗口中打开。                            _parent:在父框架集中打开。

            _self:默认。在相同的框架中打开。                 _top:在指定的框架中打开。

    二、文本

    1.文本框<input type="text" />,其属性有:

            value文本框的值,就是文本框里面显示的内容。

            name文本框的名称

    2.密码框<input type="password" />,虽然密码框和文本框相似,但在密码框里面输入内容时不显示内容,只显示●。

    3.隐藏域<input type="hidden />,隐藏域的属性有:

            name密码框的名称

            value密码框的值

    4.文本域<input /><textarea></textera>,双标签元素,值不是写在value属性里面的,是写在开始结束标签之间的,现在所学内容还不能够调整文本域的大小。示例代码:<input /><textarea>无言</textarea>,文本域里面就会显示“无言”。

    三、按钮

    1.普通按钮<input type="button" />,只显示一个按钮,但是点上去没有反应。

    2.提交按钮<input type="submit" />,具有提交功能。按钮上显示“提交”,提交按钮的属性有:

            name:按钮的名字

            value:按钮上显示的名字。<input type="submit" value="按钮" />,按钮上就会显示“按钮”两个字,替换了默认的“提交”。

    3.重置按钮<input type="reset" />,作用是将表单里的内容重置。

    <form target="_blank" action="Untitled-3.html" method="post">
        <input type="text" />
        <input type="submit" />
        <input type="reset" name="" value="重置" />
    </form>

    4.图片按钮<input type="image" />提交数据,其属性有:

            name:按钮的名字。

            src:图片按钮的图片来源地址。

    四、选择

    1.单选按钮<input type="radio" />,单选按钮的属性有:

            name:按钮名称和组名

            value:按钮的值 

    <input type="radio" name="sex" value="" /><input type="radio" name="sex" value="" />

    上面2行代码表示单选(选男或女),input type="radio"表示此代码为单选按钮,name="sex"表示此2行代码为一组。男、女为选项,只能选一个选项。

    2.复选框<input type="checkbox" />,复选框的属性有:

            name:复选框的名称

            value:复选框的值

    <input type="checkbox" name="" value="" />A
    <input type="checkbox" name="" value="" />B
    <input type="checkbox" name="" value="" />C
    <input type="checkbox" name="" value="" />D

    上面4行代码表示复选(多选),<input type="checkbox" />表示此组代码为复选代码,A、B、C、D表示4个选项,可以选1-4个选项。

    3.下拉列表<select></select>双标签,下拉列表属性有:

            name--下拉列表名称

            <option></option>:代表项,就是下拉列表里的选项。

    <select>
        <option>张店</option>
        <option>淄川</option>
        <option>恒台</option>
        <option>周村</option>
    </select>

    上面代码内容表示下拉列表里面有张店、淄川、恒台、周村四个选项。

        value:该项的值。

    4.文件选择<input type="file" name="" value="" />,文件选择的属性有:

        name--文件选择的名称

    5.其它属性

     ①readonly 只读

     ②disabled  不可用,同时不能提交

     ③hidden  隐藏

     ④checked     radio  checkbox 用来做选中

     ⑤selected    用在下拉列表,设置哪一项选中

  • 相关阅读:

    快排
    排序算法
    运算符
    二叉树
    递归
    队列
    栈(没写完)
    绘制双坐标轴的图形3-不同的plot类型
    绘制双坐标轴的图形2-不同的plot类型
  • 原文地址:https://www.cnblogs.com/xiaofox0018/p/5853605.html
Copyright © 2011-2022 走看看