We will take a look at one of the basic examples of using input data with HTML <input type="text">. This input type automatically removes line breaks from the input values, so it's intended for single line text usage as shown in the following screenshot:
In the body section of the HTML document, we will create a form where the inputs with type text will be placed:
- First we add the most basic input type
text:<form> <p> First name <input name="firstname" type="text"> </p> - Following that, we add one where audio input will be enabled:
<p> Speak up <input name="quote" type="text" x-webkit-speech speech> </p> - Also add one with the
placeholderattribute and one with theautofocusattribute:<p> Last name: <input name="lastname" type="text" placeholder="John Doe"> </p> <label> Comment <input name="comment" type="text" title="This is area to insert your opinion" autofocus > </label> - At the end, we add
submitand close the form:<input type="submit" > </form>
The <input name="firstname" type="text" > element is the most basic HTML input element, where on submitting the form, the query parameter will be:
?firstname=someText&...
The next input element has an attribute x-webkit-speech speech that is, Chrome specific attribute allowing speech input, which means you can insert text using your microphone.
For the third input element, we used the placeholder attribute that adds a beautiful hint inside the input field.
One new attribute added in HTML5 is autofocus. It is the Boolean valued attributes that allow us to specify what form control should have initial focus once the page gets loaded. We used the the single word syntax in our case but autofocus="true" will do the same trick. An additional thing to note here is that this can be appliqued on only one form element since that is the element that will get the initial focus and also it cannot be applied to input type="hidden", since it does not make much sense to do so.
If we are using our own fallback method for inserting voice data we can simply check if there is support for it in the current one in order to support other browsers:
var hasSupportForSpeach =
document.createElement("input").webkitSpeech != undefined;There is also an event being triggered that we can use for the voice input:
onwebkitspeechchange="myOnChangeFunction()"
Note
The open alternative for speech input that is developed is the Web Speech API. The main goal of it is to provide developers with a means to have speech input and output as text to speech. The API definition does not include implementation on where the recognition will be done, meaning server-side or client-side implementations are up to the vendor. More on the API on https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html.
The incubator working group that took care of the initial requirements and specification regarding speech integration in HTML5 can be found on: http://www.w3.org/2005/Incubator/htmlspeech/.