制作表单网页有几步骤?

137 2023-11-22 01:33

一、制作表单网页有几步骤?

一打开软件,2制作表单,三制作成功

二、网页制作表单行距怎么设置?

1、CSS法

可以在标签中设置margin属性,即:(顺序:上、右、下左,亦可简写为),这段CSS的作用是在当前表格外部的上下各留出5px的空白。

2、空对象法

1)空行。还可以在表格后敲回车换行,产生<p></p>标签,或者按Shift+回车软换行,产生</br>标签,都可产生一个空行。

(2)空表格。插入一个1行1列的表格,设置单元格的宽度、高度,在单元格中不输入内容。当单元格高度小于12px时,一定要将空格符 删掉,否则达不到设定高度,这一点非常重要。即:

<table width="100% " border="0" csllapacing="0" csllapacing="0" >

<tr>

<td height="5"></td>

</tr>

</table>

(3)空DIV。类似于空表格,插入一个DIV,设置其宽度、高度,超出隐藏即可。

3、透明图片法<可以在PS中新建一个5x5px的画布,背景设为透明,保存为透明GIF图片,然后在需要留间距的表格后面插入这个透明图片,将其宽度、高度可以任意调整,直到满意为直。

三、网页设计中的表单有哪几种?

表单包含多种input类型,包括 hiiden类型 ,text类型,radio类型,checkbox类型,textarea类型,file类型,select类型等基础类型,手写表单就是累耗时耗力开发销量太低而且代码量大了还容易写出bug,每个页面的表单遇到改动的时候恨不得长十双手去改,于是我自己开发了一个php写的表单生成工具,在业务逻辑通过配置或者链式操作去初始表单结构和数据,不管有多少页面都只需要通过配置下就行,我写的这个表单工具 支持块表单,行内表单,table类型表单,支持表单美化 默认是layui效果,也支持jquery控制表单行为,只需要引入layui样式和js即可。在github主页demo目录也提供了示例代码运行查看效果,

Form介绍:

使用php编写的html表单生成工具,没有任何依赖可独立使用,支持链式操作和配置创建表单,支持表单美化(默认为layui风格)

特点:

  1. 没有任何依赖可独立使用
  2. 支持链式操作创建表单
  3. 支持数组配置创建表单
  4. 支持块表单
  5. 支持行内表单
  6. 支持table表单
  7. 支持表单美化(默认为layui风格)且方便扩展

项目主页链接:

github: https://github.com/mgckid/form

gitee:https://gitee.com/mgckid/form

安装方法:

composer require mgckid/form

快速使用:

链式操作创建块表单

<?php
require __DIR__ . '/../src/Form.php';
Form::getInstance()
    ->form_method(Form::form_method_post)
    ->form_action('/')
    ->input_text('姓名', '', 'name', '法外狂徒张三')
    ->radio('性别', '', 'male', ['male' => '男', 'female' => '女'], 'male')
    ->checkbox('爱好', '', 'interest', ['ktv' => 'K歌', 'dance' => '跳舞', 'movie' => '看电影', 'run' => '跑步'], 'ktv,run')
    ->input_inline_start()
    ->input_text('省份', '', 'sheng', '湖北省')
    ->input_text('市', '', 'shi', '武汉市')
    ->input_text('区', '', 'qu', '武昌区')
    ->input_text('街道', '', 'jie', '紫阳路36号')
    ->input_inline_end()
    ->input_hidden('id', '1')
    ->input_text('user name', '', 'user', 'admin')
    ->input_password('password', '', 'password', '123456')
    ->radio('is active', '', 'is_active', [
        ['value' => '1', 'name' => 'active'],
        ['value' => '0', 'name' => 'unactive']
    ], 1)
    ->checkbox('user role', '', 'role', [
        ['value' => '1', 'name' => 'boss'],
        ['value' => '2', 'name' => 'manager'],
        ['value' => '3', 'name' => 'employee'],
    ], '1,2')
    ->select('user department', '', 'department', [
        ['value' => '1', 'name' => 'sales'],
        ['value' => '2', 'name' => 'hr'],
        ['value' => '3', 'name' => 'secured'],
    ], 1)
    ->form_class(LayuiForm::form_class_pane)
    ->input_submit('确认保存', 'class="layui-btn" lay-submit lay-filter="saveBtn"')
    //->input_date()
    //->editor()
    //->form_data()
    //->table()
    ->create();
?>

数组配置创建块表单

<?php
  require __DIR__ . '/../src/Form.php';
            $init = array(
                0 => array(
                    'title' => 'Id',
                    'name' => 'id',
                    'description' => 'Id',
                    'enum' => array(),
                    'type' => 'hidden',
                    'widget_type' => '',
                ),
                1 => array(
                    'title' => '用户id',
                    'name' => 'user_id',
                    'description' => '用户id',
                    'enum' => array(),
                    'type' => 'hidden',
                    'widget_type' => '',
                ),
                2 => array(
                    'title' => '用户名',
                    'name' => 'username',
                    'description' => '用户名',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                3 => array(
                    'title' => '真实姓名',
                    'name' => 'true_name',
                    'description' => '真实姓名',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                4 => array(
                    'title' => '密码',
                    'name' => 'password',
                    'description' => '密码',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                5 => array(
                    'title' => '邮箱',
                    'name' => 'email',
                    'description' => '邮箱',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                6 => array(
                    'title' => '是否删除',
                    'name' => 'deleted',
                    'description' => '是否删除',
                    'enum' => array(
                        0 => '未删除',
                        1 => '已删除',
                    ),
                    'type' => 'none',
                    'widget_type' => '',
                ),
                7 => array(
                    'title' => '创建时间',
                    'name' => 'created',
                    'description' => '创建时间',
                    'enum' => array(),
                    'type' => 'none',
                    'widget_type' => 'date',
                ),
                8 => array(
                    'title' => '修改时间',
                    'name' => 'modified',
                    'description' => '修改时间',
                    'enum' => array(),
                    'type' => 'none',
                    'widget_type' => 'date',
                ),
            );
            $data = array(
                'id' => 2,
                'user_id' => 'feac0fa3-3245-11e6-9b90-e03f49a02407',
                'username' => 'admin',
                'true_name' => '系统管理员',
                'email' => '',
                'deleted' => 0,
                'created' => '2016-06-14 23:39:52',
                'modified' => '2020-03-12 20:07:48',
            );
            \Form::getInstance()
                ->form_schema($init)
                ->form_data($data)
                ->input_submit('确认保存', 'class="layui-btn" lay-submit lay-filter="saveBtn"')
                ->create();

行内表单

<?php
  require __DIR__ . '/../src/Form.php';
      $init = array(
                0 => array(
                    'title' => 'Id',
                    'name' => 'id',
                    'description' => 'Id',
                    'enum' => array(),
                    'type' => 'hidden',
                    'widget_type' => '',
                ),
                1 => array(
                    'title' => '用户id',
                    'name' => 'user_id',
                    'description' => '用户id',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                2 => array(
                    'title' => '用户名',
                    'name' => 'username',
                    'description' => '用户名',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                3 => array(
                    'title' => '真实姓名',
                    'name' => 'true_name',
                    'description' => '真实姓名',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                4 => array(
                    'title' => '密码',
                    'name' => 'password',
                    'description' => '密码',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                5 => array(
                    'title' => '邮箱',
                    'name' => 'email',
                    'description' => '邮箱',
                    'enum' => array(),
                    'type' => 'text',
                    'widget_type' => '',
                ),
                6 => array(
                    'title' => '是否删除',
                    'name' => 'deleted',
                    'description' => '是否删除',
                    'enum' => array(
                        0 => '未删除',
                        1 => '已删除',
                    ),
                    'type' => 'none',
                    'widget_type' => '',
                ),
                7 => array(
                    'title' => '创建时间',
                    'name' => 'created',
                    'description' => '创建时间',
                    'enum' => array(),
                    'type' => 'none',
                    'widget_type' => 'date',
                ),
                8 => array(
                    'title' => '修改时间',
                    'name' => 'modified',
                    'description' => '修改时间',
                    'enum' => array(),
                    'type' => 'none',
                    'widget_type' => 'date',
                ),
            );
            \Form::getInstance()
                ->input_inline_start()
                ->form_schema($init)
                ->input_submit('<i class="layui-icon"></i> 搜索', ' class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"', 'class="layui-btn layui-btn-primary"')
                ->input_inline_end()
                ->form_class(\LayuiForm::form_class_pane)
                ->form_method(Form::form_method_get)
                ->create();

table表单

<?php
  require __DIR__ . '/../src/Form.php';
           $form_init = array (
                'id' =>array (
                        'title' => '主键',
                        'name' => 'id',
                        'description' => '主键',
                        'enum' =>array(),
                        'type' => 'hidden',
                        'widget_type' => '',
                    ),
                'name' =>array (
                        'title' => '配置名称',
                        'name' => 'name',
                        'description' => '配置名称',
                        'enum' =>array(),
                        'type' => 'text',
                        'widget_type' => '',
                    ),
                'description' =>array (
                        'title' => '配置描述',
                        'name' => 'description',
                        'description' => '配置描述',
                        'enum' =>array(),
                        'type' => 'text',
                        'widget_type' => '',
                    ),
                'input_type' =>array (
                        'title' => '表单类型',
                        'name' => 'input_type',
                        'description' => '表单类型',
                        'enum' =>array (
                                'hidden' => '隐藏域',
                                'select' => '下拉',
                                'radio' => '单选按钮',
                                'text' => '文本',
                                'textarea' => '多行文本',
                                'file' => '上传',
                                'none' => '非表单',
                                'editor' => '富文本',
                                'checkbox' => '复选框',
                                'date' => '日期',
                            ),
                        'type' => 'select',
                        'widget_type' => '',
                    ),
                'created' =>array (
                        'title' => '创建时间',
                        'name' => 'created',
                        'description' => '创建时间',
                        'enum' =>array(),
                        'type' => 'none',
                        'widget_type' => 'date',
                    ),
                'modified' =>array (
                        'title' => '修改时间',
                        'name' => 'modified',
                        'description' => '修改时间',
                        'enum' =>array(),
                        'type' => 'none',
                        'widget_type' => 'date',
                    ),
                'deleted' =>array (
                        'title' => '删除标记',
                        'name' => 'deleted',
                        'description' => '删除标记',
                        'enum' =>array (
                                0 => '未删除',
                                1 => '已删除',
                            ),
                        'type' => 'none',
                        'widget_type' => '',
                    ),
            );
            $form_data=array (
                0 =>
                    array (
                        'id' => 73,
                        'name' => 'solution_introduction',
                        'value' => '111',
                        'description' => '解决方案介绍',
                        'input_type' => 'textarea',
                        'created' => '2018-12-07 11:44:40',
                        'modified' => '2022-03-08 00:32:08',
                        'deleted' => 0,
                    ),
                1 =>
                    array (
                        'id' => 72,
                        'name' => 'tese_product_introduction',
                        'value' => '222',
                        'description' => '特色产品介绍',
                        'input_type' => 'textarea',
                        'created' => '2018-12-07 11:43:52',
                        'modified' => '2022-03-08 00:32:09',
                        'deleted' => 0,
                    ),
                2 =>
                    array (
                        'id' => 71,
                        'name' => 'new_product_introduction',
                        'value' => '333',
                        'description' => '新产品介绍',
                        'input_type' => 'textarea',
                        'created' => '2018-12-07 11:41:37',
                        'modified' => '2022-03-08 00:32:09',
                        'deleted' => 0,
                    ),
                3 =>
                    array (
                        'id' => 70,
                        'name' => 'site_pinterest',
                        'value' => '',
                        'description' => 'Pinterest堪称图片版的Twitter链接',
                        'input_type' => 'text',
                        'created' => '2018-11-19 11:48:12',
                        'modified' => '2019-04-27 14:08:07',
                        'deleted' => 0,
                    ),
                4 =>
                    array (
                        'id' => 69,
                        'name' => 'site_twitter',
                        'value' => '',
                        'description' => 'Twitter(非官方汉语通称推特)链接',
                        'input_type' => 'text',
                        'created' => '2018-11-19 11:47:04',
                        'modified' => '2019-04-27 14:08:07',
                        'deleted' => 0,
                    ),
                5 =>
                    array (
                        'id' => 68,
                        'name' => 'site_facebook',
                        'value' => '',
                        'description' => 'Facebook(脸书)链接',
                        'input_type' => 'text',
                        'created' => '2018-11-19 11:46:07',
                        'modified' => '2019-04-27 14:08:07',
                        'deleted' => 0,
                    ),
                6 =>
                    array (
                        'id' => 67,
                        'name' => 'site_google_plus',
                        'value' => '',
                        'description' => 'Google+SNS社交网站链接',
                        'input_type' => 'text',
                        'created' => '2018-11-19 11:45:26',
                        'modified' => '2019-04-27 14:08:07',
                        'deleted' => 0,
                    ),
                7 =>
                    array (
                        'id' => 66,
                        'name' => 'site_linkedin',
                        'value' => '',
                        'description' => 'LinkedIn领英链接',
                        'input_type' => 'text',
                        'created' => '2018-11-19 11:43:53',
                        'modified' => '2019-04-27 14:08:07',
                        'deleted' => 0,
                    ),
                8 =>
                    array (
                        'id' => 65,
                        'name' => 'site_livechat_code',
                        'value' => '',
                        'description' => 'livezilla在线客服代码',
                        'input_type' => 'textarea',
                        'created' => '2018-11-15 16:45:15',
                        'modified' => '2019-04-27 14:08:07',
                        'deleted' => 0,
                    ),
                9 =>
                    array (
                        'id' => 64,
                        'name' => 'site_skype',
                        'value' => '',
                        'description' => '联系skype',
                        'input_type' => 'text',
                        'created' => '2018-11-15 16:44:40',
                        'modified' => '2019-04-27 14:08:07',
                        'deleted' => 0,
                    )
            );
            \Form::getInstance()
                ->table('扩展配置', '', 'site_config', $form_init, $form_data)
                ->create();

四、甜品网页制作设计思路?

首先确定你做网页的主要目的,比如展示产品(你们的甜品),首先你的甜品图需要美观(做的甜品有一定创意性也是不错,好的设计或者图片隔着屏幕都能让人闻到香味),并从侧面烘托出你们的甜品做的很好(你们品牌的实力,例:历史性,专业性,销量等等),还有就是产品占网页比重大(突出主题)。

五、网页设计制作过程?

分析如下:

1、首先下载安装Dreamweaver,打开后,新建一个网页,一般选择“HTML”建立网页。选择“经典”界面,有助于我们更便捷使用这个软件。

2、下面选择这三个界面,代码、拆分、设计,一般默认设计界面,对于新手这个功能具有可视化,能更好的制作网页。

3、下面我们来制作网站站点,在电脑上建一个文件作为根目录。我们所建网站的所有文件和网页都保存在这个文件中。站点的作用就是使你的网站网页之间框架清晰。同时给站点起个名字。

4、然后再在站点根目录下建立一个专门储存网站图片的文件,并设置默认。这样你添加到这个网站的所有图片都自动保存到这个文件,不会丢失。注意文件命名要用英文。下面我用我建立的(篮球资讯网)来介绍,点击右下方篮球资讯网——下拉点击管理站点——点击高级设置——设置默认图像文件夹为刚建立的images。保存。

5、下面我们来制作这个网站首页,先学习添加图片。插入——图像——选择素材添加。点击图片,下面属性可以编辑修改图片大小,添加超链接等等。下面我修改图片大小做示范。

6、下面学习添加文本。编辑“篮球资讯网”,下面属性可以设置文本字体、添加超链接等等,点击页面属性,可以详细编辑文本属性。

7、网页基本就是文字和图片的组合,添加视频还需要学习者好好搜索Dreamweaver 的使用视频加以学习。最后制作完一个网页要记得保存。左上角文件——保存。

8、最后我们学习添加超链接。我用建立的第二个网页来做示范。选中篮球资讯网文本,点击页面下方属性——链接——点文件小按钮——选中第一个网页,这样篮球资讯网文本变成蓝色。这是网站内部链接,相反就有外部链接。添加如图,一定要写http://......就可以了。

9、最后我们浏览网页。左上角文件——在浏览器中浏览网页,点击网页中两个链接都能到达指定网页。

扩展资料:

网页设计

设计网站要注意两个要点:整体风格和色彩搭配。

风格

网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。

风格(Style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

色彩搭配

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。

网页配色小技巧:

1.用一种色彩:这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感;

2.用两种色彩:先选定一种色彩,然后选择它的对比色;

3.用一个色系:简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:

1.不要将所有颜色都用到,尽量控制在三至五种色彩以内;

2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

参考资料:百度百科:设计

六、表单制作教程?

步骤1、HTML中的表单,用于收集用户填写的信息,将收集到的信息送到action属性所表示的程序处理。

步骤2、一般表单包括:表单控件元素、表单控件提示、表单控件组。新建html文档,添加from表单元素并指定action属性。

步骤3、根据自己的需求,在表单元素标签内添加相关控件内容。

步骤4、把做好的表单用浏览器打开即可查到已完成的表单。

七、如何制作表单?

如果你对表单设计毫无头绪,可以先看一下请假单示例。

出现的请假单是这样的,这样你就对请假单或者表单的构造有了基本的了解。

接下来,我们就可以进行自己的表单设计了,以请假单为例。

点击表单中心-表单设计,你还可以选择类别人事类

点击新增按钮,选择自定义表单(建表)

对表单的信息进行基础的完善和填写,点击下一步

接下来进行表单界面的设计,操作方法相当简单,直接拖拽就行了

上述所有步骤完成后,点击下一步,保存。一个请假单的表单就完成了!

八、如何自动填写网页表单?

  让网页自动填写表单操作步骤: 打开浏览器设置,点击打开【Internet选项】 在Internet选项卡上选择【内容】,点击自动完成下面的【设置】 在自动完成设置中勾选希望自动完成功能用于哪些方面,勾选前面的复选框即可 点击确定完成

九、怎么删除网页的表单?

清除网页填写记录方法如下:把IE属性打开,在“内容”栏里有个“自动完成”,点开后在“WEB表单”和“表单上的用户名和密码”前面的勾打上,然后点“清除表单”和“清除密码”点确定就可以了

十、银河网页设计怎么制作?

域名与服务器。网站要建立,我们首先要做的事情就是注册一个域名,申请一个服务器的空间,有了这两个准备工作完成之后,我们的网站才可以去同步的完成。

2

/6

模板与网站结构。制作网页我们可以使用现成的模板,只要去编辑图片与文字就可以让网页达到我们的要求,我们也可以设置网站的结构,让网站的菜单栏按照我们的设定呈现。

3

/6

原创网页。如果我们对于网站的要求很高,那么,我们可以用相关的软件对于网页进行全面设计与制作,在制作网页之前,我们可以用PS设计出一个网站的效果页,然后再回到网页制作软件进行图片与文字的填充,这样的网页是静态的。

4

/6

网站的后台。如果我们的网站有着大量的内容,那么,我们要给网站做一个后台,这样新的网页可以从后台进行制作,只要输入文字与图片就可以快速的生成新网页,大大提升了网页制作的效率。

5

/6

网站的推广。网页的制作过程要充分考虑网站推广的因素,我们的网页要设置好相关的关键词作为标题,内容也要围绕关键词来写,图片也要精简一些,图片要设置好标签。这样的网页才可以快速的被搜索引擎所抓取。

6

/6

手机网站。还有一种网站是手机网站,这样的网页也是通过模板来做的,我们只要把文字与图片按照模板的要求来制作就可以了。另外,我们还要设置好相关的按钮与链接,让不同的网页可以通过链接进行访问与跳转,从而让手机浏览也可以轻松的实现。

顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
点击我更换图片