-
-
Notifications
You must be signed in to change notification settings - Fork 3k
Prototype JS form controls student project
Background information: Form controls (e.g. checkboxes, text inputs, radio buttons, etc.) are a significant source of complexity in many web engines. Servo is interesting in exploring alternate ways of implementing them that are easier to maintain and implement than writing native Rust code. This project requires exploring the limitations of WebComponents as a platform for re-implementing the common HTML form controls using standard HTML elements, CSS, and JavaScript. No Rust code is required, and this work will be performed in feature-complete browsers like Firefox and Chrome.
Initial step: Set up a web development environment, including the Polymer library, and demonstrate a simple servo-checkbox
element that is functionally identical to a regular checkbox input (it can simply contain a regular HTML input element for this initial step). It is highly recommended to take some time to learn about WebComponents, for which the Polymer library is a polyfill.
- In the
servo-checkbox
element, replicate the simple behaviour of a regular checkbox without using a native form control. Display some kind of visual indication of checked/unchecked state, support toggling via clicks. - Create a
servo-radio
element, replicate the simple behaviour of a regular radio button. Ensure multiple unrelated radio groups are supported. - Create a
servo-input
element that causes the appropriate input element specialization to appear based on thetype
attribute as described in the HTML specification. - Implement a
servo-text
element that is a simple one-line text input, replicating the behaviour of<input type=text>
, and hook it up toservo-input
. - Extend
servo-text
to support password input types (ie. replacing the content's visual display with '*') - Implement
servo-select
, allowing both single and multiple selections, replicating the behaviour of<select>
and<option>
. - Implement event dispatch for
input
andchanged
events per the subsections of 4.5.10.1, such listeners on theservo-input
elements receive the proper events without knowledge of the underlying replaced content. - Ensure that important properties of the
HTMLInputElement
interface function correctly for setting and getting -type
,value
,name
,checked
,form
,size
,disabled
,readOnly
- Implement
servo-button
that replicates the behaviour of<input type=[button|submit|reset]>
, including triggering the submit action on the form owner