表单

作者: YYece | 来源:发表于2017-10-17 18:03 被阅读2次
  • 表单

    用户可以在其中提供一定的数据或信息或选项的一些html元素。表单通常有一个“提交”按钮,然后可以将这些数据据/信息/选项提供给服务器上的程序使用——数据处理。
    ——表单的核心是数据。

  • 表单标签的构成和形式:
    <form name=”form1” action=”将本表单中的数据提交给的对象(是一个php文件名而已)” method=”post”>
    第一个表单项
    第二个表单项
    。。。。。。。
    </form>

  • 到底有哪些表单项?

  • 单行文本框:<input type=”text” name=”n1” />
    其他属性:
    value:设定其中的初始文字
    size:设置其输入框的宽度(单位是“字符宽”)——其中能放置该数量的字符
    maxlength:设置该输入框最多能输入的字符个数
    readonly:这是一个“无值”属性,表示“只读”,则写法是:readonly=”readonly”
    disable: 设置该输入框“无效”,即数据无效。

  • 密码框:<input type=”password” name=”n2” />
    其他属性:
    value:设定其中的初始文字
    size:设置其输入框的宽度(单位是“字符宽”)——其中能放置该数量的字符
    maxlength:设置该输入框最多能输入的字符个数

    -单选项:<input type=”radio” name=”n3” value=”某个值” />
    说明:单选项通常必须有value值;
    其他属性:
    checked: 表示该选项默认是选中的状态。也是一个“无值属性”
    name特别说明:一组的单选项要求name值必须相同。

  • 多选项:<input type=”checkbox” name=”n4” value=”某值” />
    说明:多选项通常必须有value值;
    其他属性:
    checked: 表示该选项默认是选中的状态。也是一个“无值属性”

  • 提交按钮:<input type=”submit” name=”n5” value=”提交文字” />
    说明:点击提交按钮,则表单就会“被提交”,即数据会传入到表单的action所设定的文件中去。

  • 图片按钮:<input type=”image” name=”n6” src=”图片地址” />
    说明:图片按钮的功能其实也是“提交”,但其显示出来的效果是一张图片——这样有利于美化页面。

  • 重置按钮:<input type=”reset” name=”n7” value=”重置文字” />
    说明:会将表单的所有用户填写或选择的数据恢复到初始状态

  • 普通按钮:<input type=”button” name=”n8” value=”文字” />
    说明:对表单没有影响,但可以从中产生“动作”以实现其他要求(js程序)

  • 文件域:<input type=”file” name=”n9” />
    说明:可以让用户选择本地的文件(并发送到服务器)——文件也是数据。
    隐藏域:<input type=”hidden” name=”n10” />
    说明:界面上不可见,但是作为一份“隐藏的数据”提交给服务器——编程所需。

  • 下拉选择:使用select和option标签配合实现。但要把此当作“一个表单项”
    <select name=”n11” multiple=” multiple” >
    <option value=”1” >文字1</option>
    <option value=”2” selected=”selected” >文字2</option>
    <option value=”3” >文字3</option>
    ………………….
    </select>
    说明:
    option标签上可以使用selected属性,表明该select元素的默认选中的项(默认是第一项被选中)。
    select标签上可以使用multiple属性,使该select元素可以“选择多项”(即默认只能选一个)

  • 多行选项(也叫列表选项):多行选项其实只是下拉选择的一种“变形”——设置其size值大于等于就会成多行。
    <select name=”n12” size=”4”>
    <option value=”1” >文字1</option>
    <option value=”2” >文字2</option>
    <option value=”3” >文字3</option>
    ………………….
    </select>

  • 多行文本框:
    <textarea name=”n13” rows=”行数” cols=”列数”></textarea>
    说明:
    rows设定的行数是一个数字,表示该多行文本框可以显示的文字的行数
    cols设定的列数是一个数字,表示该多行文本框可以显示的一行文字中个数
    此标签没有value属性。但其实际的“值”是放在此标签中间的所有内容。

    • 注意:表单项都必须有name属性,以表明其“名字”——服务器取其中的数据就是凭此名字。
  • 将文字和选项绑为一体<label>.............................</label>

相关文章

  • bootstrap之form表单

    表单布局 垂直表单(默认) 内联表单 水平表单 垂直表单或基本表单(display:block;) 创建基本表单的...

  • 【读书笔记+思考】移动设备表单设计

    在移动界面中,常见的表单模式有:登录表单;注册表单;核对表单;计算表单;搜索表单;多步骤表单;长表单等 登录表单:...

  • bootstrap表单

    表单布局 垂直表单(默认) 内联表单 水平表单 垂直表单或基本表单 基本的表单结构是 Bootstrap 自带的,...

  • bootstrap 表单布局的三种方式

    三种 垂直表单(默认) 内联表单 水平表单 垂直表单 效果 内联表单 效果 水平表单 效果 参考:https://...

  • 表单相关总结

    表单?表单作用:收集用户信息。表单组成:表单域、表单控件、提示信息。 表单域常用属性 常用属性: name=...

  • 网页设计:HTML表单标签

    表单包含三个基本组成部分:表单标签、表单域、表单按钮。 1,表单标签 HTML 表单用于收集用户输入,表单使用 ...

  • 2019-04-09 表单(5)

    表单布局Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 1.垂直或基本表单 ...

  • 动态表单实现

    angular动态表单 地址: angular表单 vue动态表单 地址: vue表单

  • bootstrap表单

    垂直表单(默认) 内联表单 水平表单 垂直表单 也称基本表单基本的表单结构是 bootstrap 自带的创建基本表...

  • 前端视频-day3(1)

    表单 表单不是表格,表单的核心是数据。 表单标签的构成和形式: 表单项 下面是我写的一个简单的注册表单 注意:表单...

网友评论

    本文标题:表单

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