16 Input Type Search Search Google: 17 Input Type Time Select a time: Submit 18 Input Type Week Submit

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

Use forms to create a web page(html) as shown in this pictures

## HTML Input Types and Attributes

### 16. Input Type Search
##### Search Google:
<form>
  <label for="search-google">Search Google:</label>
  <input type="search" id="search-google" name="search-google">
  <input type="submit" value="Submit">
</form>

### 17. Input Type Time
##### Select a time:
<form>
  <label for="time-select">Select a time:</label>
  <input type="time" id="time-select" name="time-select">
  <input type="submit" value="Submit">
</form>

### 18. Input Type Week
##### Select a week:
<form>
  <label for="week-select">Select a week:</label>
  <input type="week" id="week-select" name="week-select">
  <input type="submit" value="Submit">
</form>

### 19. The value Attribute
##### First name:
<form>
  <label for="first-name-value">First name:</label>
  <input type="text" id="first-name-value" name="first-name-value" value="John">
  <label for="last-name-value">Last name:</label>
  <input type="text" id="last-name-value" name="last-name-value">
</form>

### 20. The readonly Attribute
##### First name:
<form>
  <label for="first-name-readonly">First name:</label>
  <input type="text" id="first-name-readonly" name="first-name-readonly" value="John" readonly>
  <label for="last-name-readonly">Last name:</label>
  <input type="text" id="last-name-readonly" name="last-name-readonly">
</form>

### 21. The disabled Attribute
##### First name:
<form>
  <label for="first-name-disabled">First name:</label>
  <input type="text" id="first-name-disabled" name="first-name-disabled" value="John" disabled>
  <label for="last-name-disabled">Last name:</label>
  <input type="text" id="last-name-disabled" name="last-name-disabled">
</form>

### 22. The size Attribute
##### First name:
<form>
  <label for="first-name-size">First name:</label>
  <input type="text" id="first-name-size" name="first
Transcribed Image Text:## HTML Input Types and Attributes ### 16. Input Type Search ##### Search Google: <form> <label for="search-google">Search Google:</label> <input type="search" id="search-google" name="search-google"> <input type="submit" value="Submit"> </form> ### 17. Input Type Time ##### Select a time: <form> <label for="time-select">Select a time:</label> <input type="time" id="time-select" name="time-select"> <input type="submit" value="Submit"> </form> ### 18. Input Type Week ##### Select a week: <form> <label for="week-select">Select a week:</label> <input type="week" id="week-select" name="week-select"> <input type="submit" value="Submit"> </form> ### 19. The value Attribute ##### First name: <form> <label for="first-name-value">First name:</label> <input type="text" id="first-name-value" name="first-name-value" value="John"> <label for="last-name-value">Last name:</label> <input type="text" id="last-name-value" name="last-name-value"> </form> ### 20. The readonly Attribute ##### First name: <form> <label for="first-name-readonly">First name:</label> <input type="text" id="first-name-readonly" name="first-name-readonly" value="John" readonly> <label for="last-name-readonly">Last name:</label> <input type="text" id="last-name-readonly" name="last-name-readonly"> </form> ### 21. The disabled Attribute ##### First name: <form> <label for="first-name-disabled">First name:</label> <input type="text" id="first-name-disabled" name="first-name-disabled" value="John" disabled> <label for="last-name-disabled">Last name:</label> <input type="text" id="last-name-disabled" name="last-name-disabled"> </form> ### 22. The size Attribute ##### First name: <form> <label for="first-name-size">First name:</label> <input type="text" id="first-name-size" name="first
### HTML Form Attributes Explained

In this section, we will explore various HTML form attributes which make form handling more effective and user-friendly. Below are examples showcasing different attributes with practical usage scenarios.

#### 23. The maxlength Attribute
**Purpose**: Restrict the maximum number of characters that can be entered in an input field.

**Example**:
```
First name: <input type="text" name="firstname" maxlength="10">
Last name: <input type="text" name="lastname" maxlength="10">
```

#### 24. The novalidate Attribute
**Purpose**: Disable the automatic validation before submitting the form.

**Example**:
```
E-mail: <input type="email" name="email" novalidate>
<input type="submit" value="Submit">
```

#### 25. The autofocus Attribute
**Purpose**: Automatically focus the specified field when the page loads.

**Example**:
```
First name: <input type="text" name="firstname" autofocus>
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit">
```

#### 26. The formmethod Attribute
**Purpose**: Define the HTTP method to use when sending form-data.

**Example**:
```
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit">
<input type="submit" value="Submit using POST" formmethod="post">
```

#### 27. The formtarget Attribute
**Purpose**: Specify a name or keyword that indicates where to display the response after submitting the form.

**Example**:
```
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit as normal">
<input type="submit" value="Submit to a new window/tab" formtarget="_blank">
```

#### 28. The multiple Attribute
**Purpose**: Allow multiple values for an input element.

**Example**:
```
Select images: <input type="file" name="images" multiple>
<input type="submit" value="Submit">
```

#### 29. The pattern Attribute
**Purpose**: Specify a regular expression that the input field's value is checked against.

**Example**:
```
Country code: <input type="
Transcribed Image Text:### HTML Form Attributes Explained In this section, we will explore various HTML form attributes which make form handling more effective and user-friendly. Below are examples showcasing different attributes with practical usage scenarios. #### 23. The maxlength Attribute **Purpose**: Restrict the maximum number of characters that can be entered in an input field. **Example**: ``` First name: <input type="text" name="firstname" maxlength="10"> Last name: <input type="text" name="lastname" maxlength="10"> ``` #### 24. The novalidate Attribute **Purpose**: Disable the automatic validation before submitting the form. **Example**: ``` E-mail: <input type="email" name="email" novalidate> <input type="submit" value="Submit"> ``` #### 25. The autofocus Attribute **Purpose**: Automatically focus the specified field when the page loads. **Example**: ``` First name: <input type="text" name="firstname" autofocus> Last name: <input type="text" name="lastname"> <input type="submit" value="Submit"> ``` #### 26. The formmethod Attribute **Purpose**: Define the HTTP method to use when sending form-data. **Example**: ``` First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> <input type="submit" value="Submit"> <input type="submit" value="Submit using POST" formmethod="post"> ``` #### 27. The formtarget Attribute **Purpose**: Specify a name or keyword that indicates where to display the response after submitting the form. **Example**: ``` First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> <input type="submit" value="Submit as normal"> <input type="submit" value="Submit to a new window/tab" formtarget="_blank"> ``` #### 28. The multiple Attribute **Purpose**: Allow multiple values for an input element. **Example**: ``` Select images: <input type="file" name="images" multiple> <input type="submit" value="Submit"> ``` #### 29. The pattern Attribute **Purpose**: Specify a regular expression that the input field's value is checked against. **Example**: ``` Country code: <input type="
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 10 steps

Blurred answer
Knowledge Booster
Form and its Elements
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education