DEV Community: wasifali

Python-A Machine Language

wasifali — Tue, 27 Aug 2024 04:27:52 +0000

Python

Python is a high-level, interpreted programming language known for its ease of use and readability. Its design philosophy emphasizes code readability with its use of significant indentation, which helps developers write clear and concise code. Python supports multiple programming paradigms, including procedural, object-oriented, and functional programming. This versatility makes it suitable for a wide range of applications, from web development and data analysis to automation and artificial intelligence.

Key Features of Python

Readable and Simple Syntax

Python's syntax is designed to be intuitive and easy to read.

For example

Python uses indentation to define code blocks, which contrasts with other languages that use braces or keywords.

Dynamic Typing

In Python, variables do not need explicit type declarations. The type of a variable is determined at runtime.

Rich Standard Library

Python includes a comprehensive standard library that supports many common programming tasks, including file I/O, system calls, and internet protocols.

Interpreted Language

Python code is executed line by line, which makes debugging easier and enhances the interactivity of the development process.

Example Code Snippets

Here are some examples that showcase Python's syntax and capabilities:
Hello World
The classic "Hello, World!" program demonstrates the simplicity of Python syntax:

print("Hello, World!")

Basic Arithmetic Operations

Python can perform basic arithmetic operations with straightforward syntax:

a = 10
b = 5

Addition

sum = a + b
print("Sum:", sum)

Subtraction

difference = a - b
print("Difference:", difference)

Multiplication

product = a * b
print("Product:", product)

Division

quotient = a / b
print("Quotient:", quotient)

Functions

Defining and calling functions in Python is straightforward:

def greet(name):
    return f"Hello, {name}!"

Calling the function

print(greet("Alice"))

Lists and Loops

Python makes it easy to work with lists and loops:
Creating a list

fruits = ["apple", "banana", "cherry"]

Iterating through the list
for fruit in fruits:

print(fruit)

Conditional Statements

Conditional logic in Python is clear and concise:

temperature = 20

if temperature > 25:
    print("It's hot outside.")
elif temperature > 15:
    print("It's warm outside.")
else:
    print("It's cold outside.")

Object-Oriented Programming

Python supports object-oriented programming, allowing you to create classes and objects:
class Dog

def __init__(self, name, age):
        self.name = name
        self.age = age

    def bark(self):
        return f"{self.name} says woof!"

Creating an object of the class

my_dog = Dog("Rex", 5)

Accessing object properties and methods

print(my_dog.bark())

Practical Applications

Web Development: Using frameworks like Django or Flask, Python is widely used to build web applications. Here's a simple Flask example:
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Flask!"

if __name__ == "__main__":
    app.run(debug=True)

Data Analysis: Python, along with libraries like Pandas and NumPy, is a powerful tool for data analysis:
import pandas as pd
Creating a DataFrame

data = {
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35]
}
df = pd.DataFrame(data)

Displaying the DataFrame

print(df)

Machine Learning: Libraries such as TensorFlow and scikit-learn facilitate machine learning and data science projects

CSS Icons with examples

wasifali — Tue, 30 Jul 2024 12:50:30 +0000

CSS Icons

Icons can easily be added to our HTML page, by using an icon library.

How To Add Icons

The simplest way to add an icon to your HTML page is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
CSS icons are symbols or graphical representations that are created using
CSS (Cascading Style Sheets) rather than traditional image formats like PNG or SVG.
They are often used in web design to add visual elements to a website without relying on image files.
There are a few common methods for creating CSS icons:

Font Icons:

These are icons created from special icon fonts such as Font Awesome, Material Icons, or Ion icons. These fonts contain a set of glyphs (symbols) that can be styled with CSS.

For example

you might use a class like .fa-heart to add a heart icon to your HTML, and then style it with CSS properties.

CSS Shapes:

Icons can be created using pure CSS by styling HTML elements (like <div>, <span>, etc.) with CSS properties such as border, border-radius, background, and transform. This method is often used for simple geometric shapes or custom designs.
CSS icons offer several advantages, including scalability, ease of customization, and potentially smaller file sizes compared to images. They can be a versatile and efficient way to add visual elements to your web design.

Font Awesome

Include Font Awesome in your project:
Add this line to the <head> of your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Use an icon

To use an icon, add a <i> or <span>element with the appropriate classes:

<i class="fas fa-camera"></i>

Material Icons

Include Material Icons in your project:
Add this line to the

of your HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Use an icon

To use an icon, add a <i> element with the class material-icons and the icon name:

<i class="material-icons">camera_alt</i>

2. Using CSS for Custom Icons

You can also create your own icons with CSS. Here’s a simple example using pure CSS:

Create a basic HTML structure

<div class="icon-star"></div>

Add CSS to style your icon

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

This CSS snippet creates a simple star shape using borders and positioning.

3. SVG Icons

You can also use SVGs for high-quality icons:

Inline SVG

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7z"/>
</svg>

Using SVG as a background image

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;base64,...') no-repeat center center;
    background-size: contain;
}

Tips

Size and Color: For font icons and inline SVGs, you can adjust the size with font-size or the width and height properties, and change the color with color or fill for SVGs.
Accessibility: Always consider accessibility by adding descriptive text or aria attributes where needed.
Feel free to experiment and mix different methods to find what works best for your project!

How and Why we add comments in CSS

wasifali — Mon, 15 Jul 2024 15:47:37 +0000

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

Example

/* This is a single-line comment */
p {
  color: red;
}

You can add comments wherever you want in the code:

Example

p {
  color: red;  /* Set text color to red */
}

Even in the middle of a code line:

Example

p {
  color: /*red*/blue; 
}

Comments can also span multiple lines:

Example

/* This is
a multi-line
comment */

p {
  color: red;
}

Difference between HTML comments and CSS comments

In HTML, all comments are technically multi-line.
In CSS, single-line comments start with // and end at the end of the line, while multi-line comments start with /* and end with */
CSS comments work similarly to HTML comments.
The difference between them is that CSS comments are designated with the symbols /* ... */, whereas HTML comments are enclosed in <!

How we add comments in CSS

In CSS, we can add comments to explain or organize different sections of your stylesheet. Doing so might seem like an extraneous step in the coding process, but comments can be extremely helpful when debugging or redesigning your website.

HTML web storage and web storage objects

wasifali — Mon, 08 Jul 2024 10:39:43 +0000

HTML Web Storage

With web storage, web applications can store data locally within the user's browser.
Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Web storage is per origin i..e per domain and protocol. All pages, from one origin, can store and access the same data.

API and Web Storage

Google= 4.0
Microsoft Edge= 8.0
Firefox= 3.5

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

The localStorage Object

The localStorage object stores the data with no expiration date.
The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

How to create or write HTML code as example in Visual Studio Code(VS Code)

wasifali — Sun, 30 Jun 2024 15:43:02 +0000

Method of writing HTML code in VS Code

Writing HTML code in Visual Studio Code (VS Code) is straightforward and follows these steps:
Open VS Code: Launch the Visual Studio Code editor on your computer.

Create a new folder

After opening the VS code, set up the new folder.

Create a New File: Either open an existing HTML file or create a new file by selecting File > New File from the menu, or using the shortcut Ctrl + N (Windows/Linux) or Cmd + N (Mac).

Set File Type: If you created a new file, save it with an .html extension. This helps VS Code recognize it as an HTML file and provides syntax highlighting and other helpful features.

Start Writing HTML: Begin writing your HTML code. VS Code provides autocomplete suggestions and syntax highlighting to assist you as you type.

Code Formatting: VS Code can automatically format your HTML code for consistency. Use Shift + Alt + F (Windows/Linux) or Shift + Option + F (Mac) to format the entire document or a selected portion.

Preview in Browser: You can install extensions like "Live Server" or simply open the HTML file in a web browser to preview your webpage.

Save Your Work: Remember to save your changes periodically (Ctrl + S or Cmd + S) to keep your HTML file up to date.

Running of Code with Live Server

After writing the coding, the written code is run with Live Server

Method of Installing C++ extensions in Visual Studio Code (VS Code)

wasifali — Sat, 29 Jun 2024 05:04:52 +0000

Installing C++ extensions in Visual Studio Code (VS Code)

Installing C++ extensions in Visual Studio Code (VS Code) is straightforward and typically involves these steps:
Open Visual Studio Code: Launch VS Code on your computer.

Open Extensions View: Click on the Extensions icon in the Activity Bar on the side of the window, or press Ctrl+Shift+X (Cmd+Shift+X on macOS) to open the Extensions view.

Search for C++ Extension: In the Extensions view, type "C++" in the search bar. You should see extensions related to C++ programming.

Select the Extension: Look for "C/C++" by Microsoft (often the first search result). Click on the "Install" button to install this extension.

Wait for Installation: VS Code will download and install the extension. You'll see a progress bar indicating the installation status.
Restart VS Code (if required): Sometimes, VS Code may prompt you to restart the editor to enable the newly installed extension. If prompted, click "Restart".
Verify Installation: After installation and possibly restarting, the C++ extension should be ready to use. You might notice additional features like IntelliSense for C++ code.

Optional Steps

Customization: Explore the extension settings (Ctrl+, or Cmd+, to open Settings) to customize the behavior of the C++ extension.
Additional Tools: Depending on your project needs, you might also install other related extensions for C++ development, such as Git integration or debugging tools.

Methods of VS Coding

wasifali — Thu, 27 Jun 2024 08:05:00 +0000

Methods of VS Coding

Code Editing and Navigation

Basic Text Editing
Use VS Code's intuitive interface for writing and editing code. Utilize keyboard shortcuts for efficiency (e.g., Ctrl+S to save, Ctrl+Z to undo).
Multi-Cursor Editing
Use Alt+Click (or Option+Click on macOS) to place multiple cursors and edit multiple lines simultaneously.
Go to Definition
Right-click on a function or variable, then select "Go to Definition" (or use F12) to jump to where it's defined in the codebase.
Find and Replace
Use Ctrl+F to find occurrences of text in the current file, or Ctrl+Shift+F to search across all files in the project.

Extensions and Customization

Install Extensions
Use the Extensions view (Ctrl+Shift+X) to search and install extensions for additional language support, debugging tools, themes, and productivity enhancements.
Customize Settings
Modify user settings (File > Preferences > Settings or Ctrl+,) to adjust editor behavior, appearance (like themes), and integrate with external tools.

Version Control

Git Integration
Utilize built-in Git features such as status tracking, commit history, and branch management directly within VS Code. Use the Source Control view (Ctrl+Shift+G) for these operations.

Debugging

Set Breakpoints
Click in the gutter next to a line of code to set a breakpoint. Launch debugging sessions with F5 or through the Debug view (Ctrl+Shift+D). Debugging configurations can be set in the launch.json file.

Terminal Integration

Integrated Terminal
Open a terminal within VS Code (Ctrl+`) to run command-line tools, compile code, start servers, and perform other tasks without leaving the editor.

Task Automation

Tasks
Use tasks.json to define custom tasks (e.g., build scripts, test runners). Execute tasks via the Command Palette (Ctrl+Shift+P) or with keyboard shortcuts.

Code Navigation

Navigate Symbols
Use Ctrl+Shift+O to search for symbols (functions, classes, etc.) within the current file.

Navigate Files

Use Ctrl+P to quickly open files by name.

Code Formatting and Linting

Formatting
Use built-in or extension-provided formatters (e.g., Prettier, ESLint) to automatically format code to a specified style.
Linting
Configure linting tools (e.g., ESLint, TSLint) to catch errors and enforce coding standards as you type.

Code Collaboration

Live Share
Use the Live Share extension to collaborate in real-time with other developers, allowing shared debugging, terminal access, and simultaneous editing.

Refactoring and Code Analysis

Code Actions
Use VS Code's built-in or extension-provided code actions to refactor code (e.g., rename symbols, extract methods) and perform code analysis.

HTML Graphics, HTML Canvas, HTML SVG in detail with examples

wasifali — Tue, 25 Jun 2024 10:28:04 +0000

HTML Graphics

HTML graphics contains:
HTML Canvas
HTML SVG

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

<canvas id="myCanvas" width="200" height="100"></canvas>

Add a JavaScript

After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Draw a line

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

Draw a Circle

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

Draw a Text

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

Stroke Text

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

Draw Linear Gradient

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

Draw Circular Gradient

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

SVG (Scalable Vector Graphics)

SVG defines vector-based graphics in XML, which can be directly embedded in HTML pages.

The `<svg>` Element

The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, rectangles, circles, polygons, text.

SVG Circle

Example

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Example

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Comparison of SVG and Canvas

The table below shows some important differences between Canvas and SVG:

SVG

Resolution independent
Support for event handlers
Good text rendering capabilities
Slow rendering if complex
Not suited for game applications

Canvas

Resolution dependent
No support for event handlers
Poor text rendering capabilities
You can save the resulting image as .png or .jpg
Well suited for graphic-intensive games

How we declare one dimensional array by using JavaScript and Python language

wasifali — Sun, 23 Jun 2024 14:51:13 +0000

Declaring One Dimensional Array

In programming, particularly in languages like JavaScript, Python, Java, C++, and others, arrays are fundamental data structures used to store collections of elements of the same type. Here, I'll explain how to declare and use a one-dimensional array, which is the simplest form of an array that stores elements in a single row or sequence.

Declaration and Initialization

JavaScript Example

In JavaScript, arrays are dynamic and can hold elements of different types. Here's how you declare and initialize a one-dimensional array:

// Declaring and initializing an array with elements
let numbers = [1, 2, 3, 4, 5];

// Accessing elements in the array
console.log(numbers[0]); // Outputs: 1
console.log(numbers[2]); // Outputs: 3

// Adding elements to the array
numbers.push(6); // Adds 6 to the end of the array
console.log(numbers); // Outputs: [1, 2, 3, 4, 5, 6]

// Array length
console.log(numbers.length); // Outputs: 6

Python Example

In Python, arrays are implemented using lists, which are versatile and can hold elements of different types as well:

# Declaring and initializing an array with elements
numbers = [1, 2, 3, 4, 5]

# Accessing elements in the array
print(numbers[0])  # Outputs: 1
print(numbers[2])  # Outputs: 3

# Adding elements to the array
numbers.append(6)  # Adds 6 to the end of the array
print(numbers)  # Outputs: [1, 2, 3, 4, 5, 6]

# Array length
print(len(numbers))  # Outputs: 6

Explanation of the Examples

Declaration and Initialization
In both JavaScript and Python, arrays are declared by enclosing elements in square brackets [ ].
Elements in the array are separated by commas ,.
Accessing Elements
Elements in arrays are accessed using their index. In JavaScript and Python, arrays are zero-indexed, meaning the first element is at index 0, the second at index 1, and so on.
Adding Elements
Both languages provide methods (push() in JavaScript and append() in Python) to add elements to the end of the array.
Array Length
The length of an array can be determined using the length property in JavaScript or the len() function in Python.

Important Notes

Type Flexibility
JavaScript arrays can hold elements of different types (number, string, object, etc.), while Python lists can also hold heterogeneous elements.
Dynamic Size
Both JavaScript arrays and Python lists are dynamic in size, meaning they can grow or shrink as needed.
Indexing
Remember that array indices start at 0. Accessing an index beyond the array's length results in an error or undefined/null value.
Arrays are versatile and essential in programming, providing efficient ways to store and manipulate collections of data. Understanding their basics and how to work with them is crucial for building robust applications.

Program

// Declare and initialize an array of numbers
let numbers = [3, 7, 1, 9, 5];
// Print the array
console.log("Array:", numbers);

// Accessing elements by index
console.log("Element at index 0:", numbers[0]); // Output: 3
console.log("Element at index 2:", numbers[2]); // Output: 1

// Calculate the sum of all elements in the array
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

// Print the sum of array elements
console.log("Sum of array elements:", sum); // Output: 25

Explanation of the Program:

Array Declaration and Initialization:
let numbers = [3, 7, 1, 9, 5];: This line declares an array named numbers and initializes it with five elements: 3, 7, 1, 9, and 5.
Printing the Array:
console.log("Array:", numbers);: This prints the entire array numbers to the console.
Accessing Array Elements:
console.log("Element at index 0:", numbers[0]);: Accesses and prints the element at index 0 of the array (3 in this case).
console.log("Element at index 2:", numbers[2]);: Accesses and prints the element at index 2 of the array (1 in this case).
Calculating the Sum of Array Elements:
let sum = 0;: Initializes a variable sum to 0.
for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; }: Iterates through each element of the array using a for loop, adding each element to sum.
Printing the Sum:
console.log("Sum of array elements:", sum);: Prints the calculated sum of all elements in the array (25 in this case).

HTML input attributes with examples

wasifali — Sun, 23 Jun 2024 09:50:13 +0000

HTML input attributes

HTML <input> elements have various attributes that control their behavior and appearance. Here are some of the most commonly used attributes:

Type

Specifies the type of input control. Common types include:

Example

<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">

Text

A single-line text input (default).

Example

<input type="text" value="Initial Value">
<input type="checkbox" value="check1">

password

A text input where the entered text is masked.

Example

<label for="password">Password:</label>
<input type="password" id="password" name="password">

checkbox

A checkbox allowing multiple selections.

<input type="checkbox" id="agree" checked>
<label for="agree">I agree to the terms</label>

Radio

A radio button allowing single selection from multiple options.

Example

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>

  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>

  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label><br>
</form>

File

A control to select a file for upload.

Example

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile"><br><br>

  <input type="submit" value="Upload File">
</form>

Submit

A button to submit a form.

Example

<form action="/submit-form" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <input type="submit" value="Submit">
</form>

Reset

A button to reset form inputs to their default values.

Example

<form>
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname"><br><br>

  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lname"><br><br>

  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

Button

A generic button (useful with JavaScript).
email, tel, url, etc.: Input types for specific data formats (helps with mobile keyboards and validation).

Example

<button type="button">Click Me!</button>

Name

The name of the input field, which is submitted along with the form data. It must be unique within the form.

Example

<input type="text" name="username">
<input type="email" name="useremail">

Value

The initial value of the input field. For checkboxes and radio buttons, this attribute determines the value that gets submitted when the input is checked/selected.

Example

<input type="text" value="Initial Value">

Placeholder

A short hint or example text displayed in the input field before the user enters a value. It's typically used for providing a hint about the expected input format.

Example

<input type="text" placeholder="Enter your name">

Required

Specifies that the input field must be filled out before submitting the form. It triggers browser validation and displays an error message if the field is empty.

Example

<input type="text" required>

Disabled

Disables the input field so that its value is not submitted with the form and the user cannot interact with it.

Example

<input type="text" value="Disabled field" disabled>

Readonly

Makes the input field read-only, meaning the user can see its value but cannot modify it.

Example

<input type="text" value="Read-only value" readonly>

Maxlength and Minlength

Specifies the maximum and minimum length of text allowed in a text input.

Example

<input type="number" min="1" max="100">
<input type="date" min="2020-01-01" max="2024-12-31">

Maxlength

Sets the maximum number of characters allowed in the input field.

Example

<input type="text" maxlength="50">

Size

Specifies the width of the input field in characters (applies only to text, password, and search types).

Example

<label for="username">Username:</label>
<input type="text" id="username" name="username" size="30">

Pattern

Specifies a regular expression pattern that the input value must match to be considered valid.

Example

<input type="text" pattern="[A-Za-z]{3}">

Autocomplete

Enables or disables autocomplete suggestions for the input field. Values can be on or off.

Example

<form action="/shipping-details" method="post" autocomplete="shipping">
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname"><br><br>

  <label for="address">Address:</label>
  <input type="text" id="address" name="address"><br><br>

  <input type="submit" value="Submit">
</form>

Autofocus

Specifies that the input field should automatically get focus when the page loads.

Example

<input type="text" autofocus>

Multiple

Specifies that multiple values can be entered into a file input
(<input type="file">).

Example

<label for="files">Select multiple files:</label><br>
<input type="file" id="files" name="files" multiple>

These attributes can be combined to customize the behavior and appearance of <input> elements according to the specific needs of your HTML form. Each type of input (<input>) element may support different subsets of these attributes depending on its intended use.

HTML input types with examples

wasifali — Sat, 22 Jun 2024 11:00:20 +0000

HTML Input Types

Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Input Type Text

<input type="text"> defines a single-line text input field:

Example

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Input Type Password

<input type="password"> defines a password field:

Example

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is specified in the form's action attribute

Example

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values

Example

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

Input Type Radio

<input type="radio"> defines a radio button.

Example

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Example

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Input Type Button

<input type="button"> defines a button

Example

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Example

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Example

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Example

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Input Type Image

The <input type="image"> defines an image as a submit button.

Example

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

Input Type Hidden

The <input type="hidden"> defines a hidden input field

Example

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Input Type Month

The <input type="month"> allows the user to select a month and year.

Example

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type Number

The <input type="number"> defines a numeric input field.

Example

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input Type Search

The <input type="search"> is used for search fields

Example

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Example

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Example

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Example

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

HTML form elements with their attributes and examples

wasifali — Fri, 21 Jun 2024 06:48:17 +0000

HTML form elements

HTML (Hypertext Markup Language) provides various form elements that allow users to interact with web pages by entering data, making selections, and submitting information. Let's delve into some of the key form elements in HTML:

`<form>`

The <form> element is used to create an HTML form for user input.

Attributes:

action: Specifies where to send the form data when submitted (URL).
method: Specifies the HTTP method (GET or POST) used to send the form data.
target: Specifies where to display the response after submitting the form (_self, _blank, etc.).

Text Input: `<input type="text">`

Creates a single-line text input field.

Attributes:

type: Specifies the type of input (e.g., text, password, email, number).
name: Specifies the name of the input field.
value: Specifies the initial value of the input field.

Example

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Textarea: `<textarea>`

Creates a multi-line text input field (for longer text).

Attributes:

name: Specifies the name of the textarea.
rows, cols: Specifies the visible height and width of the textarea in lines and characters.

Example

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Checkbox: `<input type="checkbox">`

Creates a checkbox that can be checked or unchecked.

Attributes:

name: Specifies the name of the checkbox.
value: Specifies the value to be sent if checked.
checked: Specifies that the checkbox should be pre-selected.

Example

<input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
<label for="subscribe"> Subscribe to Newsletter</label><br>

Radio Button: `<input type="radio">`

Creates a radio button for selecting one option from multiple choices.

Attributes:

name: Specifies the name of the radio button group.
value: Specifies the value to be sent if selected.
checked: Specifies that the radio button should be pre-selected.

Example

<input type="radio" id="male" name="gender" value="male" checked>
<label for="male"> Male</label><br>

Select Dropdown: `<select>`

Creates a dropdown list (combo box) from which users can select one or more options.

Attributes:

name: Specifies the name of the select element.
<option>: Specifies each option in the dropdown list.
value: Specifies the value to be sent if selected.
selected: Specifies that an option should be pre-selected.

Example

<select>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Button: `<button>`

Creates a clickable button.

Attributes:

type: Specifies the type of button (submit, reset, button).
name, value: Used with type="submit" to send form data.

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Hidden Input: `<input type="hidden">`

Creates a hidden input field that is not displayed but still sends data when the form is submitted.
Useful for passing additional information without user interaction.

Example

<input type="hidden" name="referrer" value="homepage">
<input type="hidden" name="campaign" value="summer_sale">

File Input: `<input type="file">`

Creates a file upload control to select files from the user's device.

Attributes:

accept: Specifies the types of files that the server accepts.

Example:

<form action="/upload-files" method="post" enctype="multipart/form-data">
  <label for="files">Select multiple files:</label><br>
  <input type="file" id="files" name="files[]" multiple><br><br>

  <button type="submit">Upload</button>
</form>