码迷,mamicode.com
首页 > 其他好文 > 详细

form表单

时间:2019-01-06 16:32:54      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:www   multi   char   spl   需要   value   disabled   form表单   规则   

表单属性

 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。

属性:action、method、enctype

    action  表单要提交的地址,用于处理表单的内容(一般是提交字典到后台的一个接口,这个接口是java写成的,提交到这个接口后后台就知道如何处理这些数据了)。

    method  提交的方法,默认是get方式提交。

              get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

              post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

    enctype  对表单数据进行编码,默认都是要编码的。格式为:application/x-www-form-urlencoded(表单默认的编码格式,表单发送前对所有字符进行编码。编码规则:空格转换为“+”号,特殊符号转换为ASC HEX值)。提交普通的文本内容到服务器就可以采用这种默认的编码方式。当你需要提交的是一个文件时,编码就需要采用另一种格式:multipart/form-data(不对字符编码,文件上传时使用)。text/plain(是一种纯文本编码,空格转换为“+”号,但是不对特殊字符进行编码)。

 

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <form action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <input type="submit" value="百度一下">
        </form>
</body>
</html>
百度搜索实例

 

 

表单元素

<input> type 属性:

        text  文本框输入(默认text文本框类型)。

            autocomplete(自动完成输入的内容,要求表单元素要有name属性才有自动完成的效果,off表示自动完成不可用,on表示自动完成可用)

            disabled(设置或者获取控件的状态,默认是false即可用,等于true时不可用,不能输入内容)

    password  密码框。(以下属性text和password共有)

            size(指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位,对于其他元素,宽度以像素为单位)

            maxlength(type为text或password时,表示输入的最大字符数),有利于防止sql的注入攻击

            readonly 只读. 

      placeholder 框内预置内容(灰色),写上内容时才消失

 

        radio  单选按钮。属性:

             name(将name的值设置为相同值,才表示一组数据,才能实现单选功能)

             value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)

             checked(是否被选中的状态)

        checkbox  复选框。

             name(名字一定要一样一样的,才表示是一组数据,添加到同一value值列表提交到服务器)

             value(必须要写,提交到服务器的key值,实际开发过程中value一般是编号)

             checked(是否被选中的状态)

        file  文件域,上传文件(不同的浏览器表现形式不同)

    submit  提交按钮。用于提交表单。

    reset  重置按钮。清空表单的输入,恢复到表单默认的状态。

        button  普通按钮。一般结合javascript使用。

    image  图片按钮,用来提交表单,与submit是一样的效果。

             src(图片路径)

    hidden  隐藏字段。

             value(隐藏的内容)

 

    color  颜色标签。value指定颜色值(采用#十六进制数表示)。

    date  日期。value值指定默认的日期,格式为****-**-**(年月日)。

    datetime-local  显示本地时间,value值指定默认的时间,格式为2016-05-20T11:10:10(年月日T时分秒)。 

    number  数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。

    range  滑动标签。min(指定最小值)、max(指定最大值)、value(指定当前默认值)。

    week  每年的周数。value指定哪一年第几周,格式为2016-W25(2016年第25周)。

 

<textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。

        name (表单提交项的key)

    cols(设置文本域宽度)

        rows(设置文本域高度,即行数)

 

<select> 下拉框标签。使用时要结合<option>子标签一起使用。

        name:表单提交项的key

        size:选项个数

        multiple:多选

        <option> 下拉选中的每一项

    •   value(表单提交项的值)
    •   selected(selected下拉选默认被选中)

        <optgroup>为每一项加上分组

 

<label> 把元素与文本结合起来

友好设计:不只是选中复选框才能选中并打钩,要求点击对应的文字也能选中该复选框。
这种情况下要用到<label>标签的for属性(设置或获取给定标签对象指定到的对象,值=另一个元素的id号即可)

1
2
<label for="name">姓名</label>
<input id="name" type="text">

 

<fieldset> 对表单中的相关元素进行分组

1
2
3
4
<fieldset>
    <legend>温馨提示</legend>
    <div align="middle">不要忘记点赞哦 ==</div>
</fieldset>

  技术分享图片

 

value: 表单提交项的值

对于不同的输入类型,value 属性的用法也不同:

    • type="button", "reset", "submit" - 定义按钮上的显示的文本
    • type="text", "password", "hidden" - 定义输入字段的初始值
    • type="checkbox", "radio", "image" - 定义与输入相关联的值

form表单

标签:www   multi   char   spl   需要   value   disabled   form表单   规则   

原文地址:https://www.cnblogs.com/liangdong/p/10229114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!