Enhance Form component with missing attributes

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### 0.0.22 (Unreleased)
 
+- [#206](https://github.com/influxdata/clockface/pull/206): Enhance `Form` component with missing attributes
 - [#204](https://github.com/influxdata/clockface/pull/204): Introduce `ConfirmationButton` composed component
 - [#202](https://github.com/influxdata/clockface/pull/202): Introduce standardized `Popover` component
 - [#197](https://github.com/influxdata/clockface/pull/197): Port `AutoInput` component from InfluxDB and add to `Input` family

src/Components/Form/Form.tsx

@@ -11,16 +11,32 @@ import {FormFooter} from './FormFooter'
 import {FormBox} from './FormBox'
 
 // Types
-import {StandardProps} from '../../Types'
+import {StandardProps, AutoComplete, EncType, Method} from '../../Types'
 
 // Styles
 import './Form.scss'
 
 interface Props extends StandardProps {
+  /** Form submit URI */
+  action?: string
+  /** A space-delimited list of character encodings. */
+  acceptCharset?: string
+  /** Allows or disallows browser autocomplete functionality */
+  autoComplete?: AutoComplete
+  /** Type of content to be submitted to the server */
+  encType?: EncType
+  /** HTTP Method to be used on form submit */
+  method?: Method
+  /** Input field name attribute */
+  name?: string
+  /** Enable or disable form validation */
+  noValidate?: boolean
   /** Inline CSS styles */
   style?: React.CSSProperties
   /** Function to be called on form submit */
   onSubmit?: (e: React.FormEvent) => void
+  /** Context name or keyword */
+  target?: string
 }
 
 export class Form extends Component<Props> {
@@ -38,11 +54,32 @@ export class Form extends Component<Props> {
   public static Box = FormBox
 
   public render() {
-    const {children, style, testID, id} = this.props
+    const {
+      children,
+      style,
+      testID,
+      id,
+      action,
+      acceptCharset,
+      autoComplete,
+      encType,
+      method,
+      name,
+      noValidate,
+      target,
+    } = this.props
 
     return (
       <form
+        acceptCharset={acceptCharset}
+        action={action}
+        autoComplete={autoComplete}
+        encType={encType}
+        method={method}
+        name={name}
+        noValidate={noValidate}
         style={style}
+        target={target}
         className={this.formWrapperClass}
         onSubmit={this.handleSubmit}
         data-testid={testID}

src/Types/index.tsx

@@ -371,3 +371,15 @@ export enum PopoverType {
   Solid = 'solid',
   Outline = 'outline',
 }
+
+export enum EncType {
+  Application = 'application/x-www-form-urlencoded',
+  Multipart = 'multipart/form-data',
+  Text = 'text/plain',
+}
+
+export enum Method {
+  Post = 'post',
+  Get = 'get',
+  Dialog = 'dialog',
+}