Working with forms

Form controls in VSCode Elements are designed to be used like standard HTML form elements. The following components can serve as fully functional form controls:

Basic example

Form controls in VSCode Elements work just like native form controls without requiring additional JavaScript.

Search query: Search 
<form
  action="/working-with-forms"
  method="get"
  enctype="application/x-www-form-urlencoded"
>
  <vscode-label for="query">Search query:</vscode-label>
  <vscode-textfield id="query" name="query"></vscode-textfield>
  <vscode-button type="submit">Search</vscode-button>
</form>

Processing form data

In a typical Webview-based extension, the form data is usually submitted in the background without reloading the page. In certain scenarios, it might not be submitted at all. In such cases, the FormData interface can be utilized to access the form data.

Title Category Page Article Blog Post Body Submit 
 
  
 
     
  •   
    •   
  •   
    •  
 
 
<form id="form1">
  <vscode-form-group variant="vertical">
    <vscode-label for="form1-title">Title</vscode-label>
    <vscode-textfield name="title" id="form1-title"></vscode-textfield>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-label for="form1-category">Category</vscode-label>
    <vscode-single-select name="category" id="form1-category">
      <vscode-option value="page">Page</vscode-option>
      <vscode-option value="article">Article</vscode-option>
      <vscode-option value="blog">Blog Post</vscode-option>
    </vscode-single-select>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-label for="form1-body">Body</vscode-label>
    <vscode-textarea name="body" id="form1-body" rows="10"></vscode-textarea>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-checkbox label="Draft" name="draft" id="form1-draft"
    ></vscode-checkbox>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-button type="submit">Submit</vscode-button>
  </vscode-form-group>
  <pre id="form1-output"></pre>
</form>
 
 
  
 
 
const form = document.getElementById("form1");
let output = document.getElementById("form1-output");

form.addEventListener("submit", (ev) => {
  ev.preventDefault();

  const fd = new FormData(form);
  let out = "";

  for (let [name, value] of fd) {
    out += `${name}: ${value}\n`;
  }

  output.innerHTML = out;
});
 
 
 
  

Built-in form validation


VSCode Elements supports the HTML form validation features built into browsers.
The example below demonstrates how the MDN form validation sample application is re-implemented using
VSCode Elements form controls.

 
 
  Do you have a driver's license?       Age    What's your favorite fruit?  Banana Cherry Apple Strawberry Lemon Orange    What's your email address?    Leave a short message    Submit  
 
  
 
     
  •   
    •   
  •   
    •  
 
 
<form
  action="/introduction/working-with-forms"
  method="get"
  enctype="application/x-www-form-urlencoded"
  id="form2"
>
  <vscode-form-group variant="vertical">
    <vscode-label required>Do you have a driver's license?</vscode-label>
    <vscode-radio-group>
      <vscode-radio label="Yes" name="driver" value="yes" required
      ></vscode-radio>
      <vscode-radio label="No" name="driver" value="no" required></vscode-radio>
    </vscode-radio-group>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-label for="form2-age">Age</vscode-label>
    <vscode-textfield
      type="number"
      min="12"
      max="120"
      step="1"
      id="form2-age"
      name="age"
      pattern="\d+"></vscode-textfield>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-label for="form2-fruit" required
      >What's your favorite fruit?</vscode-label
    >
    <vscode-single-select name="fruit" id="form2-fruit" combobox required>
      <vscode-option value="banana">Banana</vscode-option>
      <vscode-option value="cherry">Cherry</vscode-option>
      <vscode-option value="apple">Apple</vscode-option>
      <vscode-option value="strawberry">Strawberry</vscode-option>
      <vscode-option value="lemon">Lemon</vscode-option>
      <vscode-option value="orange">Orange</vscode-option>
    </vscode-single-select>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-label for="form2-email">What's your email address?</vscode-label>
    <vscode-textfield type="email" name="email" id="form2-email"
    ></vscode-textfield>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-label for="form2-message">Leave a short message</vscode-label>
    <vscode-textarea id="form2-message" name="msg" maxlength="140" rows="5"
    ></vscode-textarea>
  </vscode-form-group>
  <vscode-form-group variant="vertical">
    <vscode-button type="submit">Submit</vscode-button>
  </vscode-form-group>
  <pre id="form2-output"></pre>
</form>
 
 
  
 
 
  const form = document.getElementById("form2");
  let output = document.getElementById("form2-output");

  form.addEventListener("submit", (ev) => {
    ev.preventDefault();

    const fd = new FormData(form);
    let out = "";

    for (let [name, value] of fd) {
      out += `${name}: ${value}\n`;
    }

    output.innerHTML = out;
  });