表单元素

2018-06-24 01:58:44来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、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    用在下拉列表,设置哪一项选中

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css3中“渐变”兼容性解决方案

下一篇:关于移动端元素定位在页面可视区外,超出部分隐藏的问题