TUDTC CSWD

What is an HTML input element?
What is an HTML input element?
- HTML input elements are primarily used in HTML forms. Form data is submitted to the server for processing. In the example below a php script on a server processes the submitted data.
  Example of code for an HTML form
```
<form action="https://303bha.duckdns.org/tudt/cswd/process_example_form.php" method="post">
    <label for="fn">First name:</label> <input type="text" name="firstname" id="fn"><br/>
    <label for="mn">Middle name:</label> <input type="text" name="middlename" id="mn"><br/>
    <label for="sn">Surname:</label> <input type="text" name="surname" id="sn"><br/>
    <input type="submit" value="Submit">
</form>
```
  The example form, rendered
  
  First name:
  Middle name:
  Surname:
  
  ACTION: Fill out the form and submit it. The processing in this case happens on the server, by a script for which the URL is specified with the action attribute in the form tag.
- Input elements are also a general mechanism for collecting input from users. This input can be accessed by Javascript for client-side processing.
Input element types
Input element types

HTML5 defines a large number of input types, listed here. Creating an input element of a particular type harnesses the HTML5 interpreter's capability for input validation.

ACTION: Create an HTML page and add a few different input elements to try them out.

Text input

The type of input we will primarily be dealing with in this module is text. The example shows a text input element and some Javascript code for accessing its value.
Examples of a text input elements (HTML code and rendered)
```
<input type="text" size="30">
```
```
<input type="text" size="20" placeholder="Enter your name">
```
```
<label for="occ">Occupation?</label>
<input id="occ" type="text" size="10" value="Student">
```
Occupation?
ACTION: Add the example input elements to your HTML file and try them out. Place them each in a paragraph element for better layout.
Working with Input Elements in Javascript
Working with Input Elements in Javascript

The example shows a text input element and some Javascript code for accessing its value. Note that to get the value of an input element you use value, not innerHTML.
Reading and setting the value of a text input element Javascript
```
<input type="text" size="10" id="some-text">

<script>
    // read the value (the expression evaluates to the string in the input element)
    document.getElementById("some-text").value;

    // set the value to "hello"
    document.getElementById("some-text").value = "hello";
</script>
```
ACTION: Add the element from the example to your HTML file, placing it inside a paragraph element. Now try out the example Javascript code in the console:
- run the expression that reads the value from the input element (expected outcome: it evaluates to "")
- type something into the input field and run the previous instruction again (expected outcome: the expression evaluates to your string)
- run the code for setting the value (expected outcome: the value in the input field changes)

What is an HTML input element?

Input element types

Text input

Working with Input Elements in Javascript