Git Product home page Git Product logo

forms's Introduction

Forms Extension For Quarto

This extension allows you to add an HTML form to your Quarto HTML pages, using the the form shortcode

Installing

quarto install extension jlgraves-ubc/forms

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

The forms extension has two parts:

  1. A set of metadata, in the document header, which defines the form's part
  2. A shortcode {{< form >}} which embeds it in the appropriate place in the document.

Form Definition

You define a form using the metadata in the document header, as follows:

---
form:
  action: "/action.js"
  submit: "Submit Now!"
  method: "GET"
  fields:
  - name: "A Text Field"
  - type: "text"
  - id: "textfield1" 
---

Fields which take multiple entry values take a values parameter, which looks like:

  - name: Checkbox
    type: checkbox
    id: checkbox1
    label: "My Checkbox"
    values:
    - text: "High"
      value: "hi"
    - text: "Low"
      value: "lo"
    - text: "Mid"
      value: "mid"

You can see more detailed (and better-formatted) documentation in the example, below.

Example

Here is the source code for a minimal example: example.qmd.

Example

Contributing

This project is open and welcome contributions. Here are a couple of things you could do:

  • Modify all of the HTML classes to use variables instead of built-ins, to make the easier to manage or adjust
  • Add some of the rarer form elements I didn't already code
  • Create support for <legend> items in the form
  • Add a placeholder parameter
  • Write tests for key functionality
  • Add form display options for subtext

Just submit a pull request!

forms's People

Contributors

jlgraves-ubc avatar andrewheiss avatar arneschillert avatar toninif avatar

Stargazers

David King avatar Emma Marshall avatar Santiago Garcia Rios avatar  avatar tagyro avatar Michał Bojanowski avatar Dzul avatar  avatar  avatar  avatar Joey Trampush avatar Elian H. Thiele-Evans avatar Jawad A. Khan avatar Andrew Allen Bruce avatar Caro Buck avatar Camilo García avatar  avatar Hsincho avatar Julian Tao avatar Martin Stein avatar Gregory M. Kapfhammer avatar  avatar Lars Schöbitz avatar Devin Pastoor avatar Roy Francis avatar Christophe Dervieux avatar Kit Macleod avatar  avatar Sox avatar

Watchers

 avatar

forms's Issues

Manipulating form element attributes

I need to understand how to change attributes of the form element, specifically i need to add attribute method="POST" to form element so that i achieve

...

How do i achieve this? Please help.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.