Today I have learned Form in javascript

 Form in javascript:

  • Form name tag is used to define the name of the form. The name of the form here is "Login_form". This name will be referenced in the JavaScript form.
  • The action tag defines the action, and the browser will take to tackle the form when it is submitted. Here, we have taken no action.
  • The method to take action can be either post or get, which is used when the form is to be submitted to the server. Both types of methods have their own properties and rules.
  • The input type tag defines the type of inputs we want to create in our form. Here, we have used input type as 'text', which means we will input values as text in the textbox.
  • Net, we have taken input type as 'password' and the input value will be password.
  • Next, we have taken input type as 'button' where on clicking, we get the value of the form and get displayed.

  • When we submit the form, the action is taken just before the request is sent to the server. It allows us to add an event listener that enables us to place various validations on the form. Finally, the form gets ready with a combination of HTML and JavaScript code.

    Let's collect and use all these to create a Login form and SignUp form and use both

  •  <form>
      <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" />
            <br />
            <label for="lname">Last name:</label>
            <br />
            <input type="text" id="lname" name="lname" value="Kumar" />
            <br /> <br />
    <input type="radio" id="html" name="fav_language" value="HTML1" />
            <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="js" name="fav_language" value="JS" />
            <label for="javascript">JavaScript</label>
            <br />
            <br />
            <input type="checkbox" value="Apple1" id="apple1" name="fruit" />
            <label> I have an Apple</label>
            <br />
            <input type="checkbox" value="Orange1" id="orange1" name="fruit" />
            <label> I have an Orange</label>
            <br />
            <input type="checkbox" value="Grapes1" id="grapes1" name="fruit" />
            <label> I have a Grapes</label>
            <br />
            <label for="phone number">Phone number:</label>
    <input type="number" id="phone number" name="phone number" />
    <br></br>
            {/* input for type="submit" it will appear as button */}
            <input type="submit" value="Submit" />
            <br></br>
            <label for="comment">Comments:</label>
    <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
            </form>
  • Output:





Comments

Post a Comment

Popular posts from this blog

Building a Full-Stack Student Management System with React.js and NestJS

  🚀 My Journey Creating a Student Management System 🌟 I'm excited to share my recent project — a Student Management System ! This project gave me hands-on experience in building a full-stack application, enhancing both my frontend and backend development skills. 💡 Project Overview The Student Management System is designed to help educational institutions efficiently manage student data, including enrollment, attendance, and performance. The goal was to create a user-friendly platform for both students and administrators. 🔨 Tech Stack Used ✅ Frontend: JavaScript, HTML, CSS, React.js ✅ Backend: TypeScript, NestJS, Node.js ✅ Database: MongoDB (with _id for unique identifiers) 🌟 Key Features ✔️ Student Registration – Easy registration with unique ID management ✔️ Attendance Tracking – Real-time updates on student attendance ✔️ Performance Reports – Generate and view student performance reports ✔️ Admin Panel – Secure access for administrators to manage student...
Read more

Today I have solved the problem in javascript

 Consider the following scenario: there are N mice and N holes placed at integer points along a line. Given this, find a method that maps mice to holes such that the largest number of steps any mouse takes is minimized.Each move consists of moving one mouse one unit to the left or right, and only one mouse can fit inside each hole.For example, suppose the mice are positioned at [1, 4, 9, 15], and the holes are located at [10, -5, 0, 16]. In this case, the best pairing would require us to send the mouse at 1 to the hole at -5, so our function should return 6. const mice = [1, 4, 9, 15]; const holes = [10, -5, 0, 16]; function minSteps(mice, holes) {    mice.sort((a, b) => a - b);     holes.sort((a, b) => a - b); let maxSteps = 0;     for (let i = 0; i < mice.length; i++) {         let steps = Math.abs(mice[i] - holes[i]);         if (steps > maxSteps) {             maxStep...
Read more

Today I have solved problem in javascript

 You are given an array X of floating-point numbers x1, x2, ... xn. These can be rounded up or down to create a corresponding array Y of integers y1, y2, ... yn. Write an algorithm that finds an appropriate Y array with the following properties: The rounded sums of both arrays should be equal. The absolute pairwise difference between elements is minimized. In other words, |x1- y1| + |x2- y2| + ... + |xn- yn| should be as small as possible. For example, suppose your input is [1.3, 2.3, 4.4]. In this case you cannot do better than [1, 2, 5], which has an absolute difference of |1.3 - 1| + |2.3 - 2| + |4.4 - 5| = 1. const inputArray = [1.3, 2.3, 4.4]; const resultArray = roundArray(inputArray); function roundArray(inputArray) {     const n = inputArray.length;     const roundedArray = [];     let roundedSum = 0; for (let i = 0; i < n; i++) {         consat roundedValue = Math.round(inputArray[i]);         rounded...
Read more