English 中文(简体)
B. 建立长期多步骤形式的最佳办法
原标题:Best approach to create a long multi-step form

I have a questionnaire with 100 yes/no questions that are separated by 3 sections, and that I need to implement on a website. The goal is to create a multi-step form (each question will appear at a time) and then handled the answers of the users (PHP or Node.js will be used to handle the data).

我认为,创建有100个标签和输入html档案的形式是一种好的做法。 因此,由于表格太长,我是否应在javascript案卷中提出一系列问题,并将这些问题分号列入html案?

由于问题分三节,我认为一系列物体将适合:

const questions = [
{ text: "Question 1", section: "Section 1" },
{ text: "Question 2", section: "Section 1" },
{ text: "Question 3", section: "Section 1" },
{ text: "Question 4", section: "Section 2" },
{ text: "Question 5", section: "Section 2" },
{ text: "Question 6", section: "Section 2" },
{ text: "Question 7", section: "Section 3" },
{ text: "Question 8", section: "Section 3" },
{ text: "Question 9", section: "Section 3" },
];

这种做法是否好? 或者,我是否在html档案中制造所有标签和投入?

问题回答

我将把它作为一系列的章节加以编排,然后每一节都有问题,而不是有<条码><<>><>>>。 每一个问题的关键。

这样,你就能够有比更多的数据,如姓名、描述等。 如果你想要改变“国际倡议”或做些什么,则在法规中更容易告诉你在哪几节之间。

const questionSections = [
  {
    name:  Section 1 ,
    description:  This section is about... ,
    questions:[
      { text: "Question 1" ... },
      { text: "Question 2" ... },
      { text: "Question 3" ... },
    ]
  },
  {
    name:  Section 2 ,
    description:  This section is about... ,
    questions:[
      { text: "Question 4" ... },
      { text: "Question 5" ... },
      { text: "Question 6" ... },
    ]
  },
  {
    name:  Section 3 ,
    description:  This section is about... ,
    questions:[
      { text: "Question 7" ... },
      { text: "Question 8" ... },
      { text: "Question 9" ... },
    ]
  },
];

没有任何理由在购买力平价中做同样的事情。 这些数据在两种语言中都有同样的结构,这只是取决于哪一种是满足你们需求的最佳选择,或者可能取决于你们想要如何建立国际调查。

在 Java文中提出一系列问题,并积极将这些问题纳入超文本处理,这确实是处理带有多个章节的长期问卷的良好办法。 这种做法有助于更好地组织和保持你的法典。

通过使用你提供的一系列物体,你可以很容易地回避问题,并动态地产生超文本文档中的形式要素。 这种做法将减少您的超文本档案中重复使用代码的数量,并便于今后添加、删除或修改问题。

这里的一个例子是,你如何利用<代码> 问题阵列,以动态方式生成使用 Java本的形式要素:

const form = document.querySelector( #myForm );

questions.forEach(question => {
  const label = document.createElement( label );
  label.textContent = question.text;

  const input = document.createElement( input );
  input.type =  checkbox ; // or  radio  for yes/no options
  input.name = question.section; // use section as the name for grouping questions

  form.appendChild(label);
  form.appendChild(input);
  form.appendChild(document.createElement( br )); // add a line break between questions
});

In this example, we re using the forEach method to iterate over each question object in the questions array. For each question, we create a <label> element with the question text and an <input> element for the user s response. We then append these elements to the form.

通过采用这种办法,你可以方便地管理和修改<编码>查询阵列中的问题,而不必人工更新超文本。 这可以节省时间,使你的法典更加可行。

注意根据您的具体要求调整该守则,并取消偏好。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签