博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML表单的应用
阅读量:4557 次
发布时间:2019-06-08

本文共 1484 字,大约阅读时间需要 4 分钟。

HTML中的表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,

表单的作用是提供让读者在网页上输入,勾选和选取数据,以便提交给服务器数据库的工具,人机交互。

表单用<form>标签表示

基本结构:

属性名 属性值 说明
name 字符串 给表单命名
method  get 表单传输方式

将表单数据以名称/值对的形式附加到 URL 中(可见)

post

将表单数据附加到 HTTP 请求的 body 内(数据不显示在 URL 中)安全

 action  url  传输目标地址

enctype

application/x-www-form-urlencoded

multipart/form-data (发送文件)
text/plain

规定在向服务器发送表单数据之前如何对其进行编码。

(适用于 method="post" 的情况)

 

 

 

 

 

 

 

 

表单元素类型

通用格式(除textareaselect

两个属性:name   value   非常重要,在后期需要赋值与调取

 一、文本类型

    1、文本框   ---text

                     1>不可操作        ---disabled  (属性名与属性值相同的可只写属性名)

                     2>只读           --readonly

                     3>默认提示字        ---placeholder   placeholder =””)

    2、密码框   ----password

    3、隐藏域   ----hidden

    4、多行文本   ----textarea

          特殊格式

 多行文本框可随意拖动     添加resize:none属性,禁止拖动
二、选择类型
   1、单选    ---radio
内容

        1>不可操作-   --disabled

        2>默认选中     -checked

        只能选择一个时,需要在input属性中添加name属性,并添加相同的属性值

       label 标签,点选时,可扩展到文字,不必只能点击圆点。input标签放在label标签内。

         2、 多选    ---checkbox

内容

 

        默认选中项加属性     -checked

       3、下拉框     ---<select> <option>

       1>默认选中   selected   (是option的属性)

       2>全部显示   multiple   (是select的属性)  

       3>显示多条   size       (是select的属性) (size=”数字”)

特殊格式:下拉框(组合标签)

   下拉框的值,就是option里的value值,如果option里没有value属性,就是option内容

三、按钮类型

     1、普通按钮     ---button

  2、提交按钮    ---submit        (提交到form表单的内容,只在form内有效)

     也可以直接用   <button> </button>

  3、复位按钮   -----reset        (清空form表单内的内容,form外的无关)

四、文件类型  ---file

    上传栏位:<input type="file" name="file">

    需要在form中添加属性enctype="multipart/form-data"

五、图片类型

      图像按钮:<input type="image" src="url" alt="文本">

 

表单加上外框和标题

 

:<fieldset>...</fieldset>  

 

标  题:<legend>...</legend>

 

 

补充:

格式化标签<pre></pre>,里面内容与书写一致,显示空格、回车等

 

转载于:https://www.cnblogs.com/dk2557/p/9140724.html

你可能感兴趣的文章
基于托管C++的增删改查及异步回调小程序
查看>>
hdu 1811 Rank of Tetris
查看>>
56. Merge Intervals 57. Insert Interval *HARD*
查看>>
java 调整jvm堆大小上限
查看>>
浏览器全屏之requestFullScreen全屏与F11全屏
查看>>
软件包管理:rpm命令管理-安装升级与卸载
查看>>
旋转图像
查看>>
字符串中的数字(字符串、循环)
查看>>
15.select into
查看>>
缓存-->Java中缓存的原理
查看>>
运行web项目端口占用问题
查看>>
Java Spring-IOC和DI
查看>>
【NOIP1999】【Luogu1015】回文数(高精度,模拟)
查看>>
Linux上安装Python3.5
查看>>
crt安装
查看>>
git切换分支报错:error: pathspec 'origin/XXX' did not match any file(s) known to git
查看>>
c++中static的用法详解
查看>>
转 我修改的注册表,但是程序运行起来,还是记着以前的
查看>>
图片轮播功能
查看>>
第六周小组作业:软件测试和评估
查看>>