html form design assignment

• Password Generator
• HTML Editor
• HTML Encoder
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face
• Color Picker
• Colors CMYK
• Color mixer
• Color Converter
• Color Contrast Analyzer
• Color Gradient
• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

HTML Form Templates

An HTML form is a section of a document containing form elements. Form elements are various types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, labels and so on.

The HTML <form> tag is used for declaring a form. This tag comes in pairs. The special elements which are called controls are written between opening (<form>) and closing (</form>) tags.

The following form elements are used to create a form:

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <fieldset>
• <label>

Here you can find a collection of various kinds of forms which are created using only HTML and CSS . The forms are classified and you can choose the type you would like to use.

The below-mentioned forms are free to copy and use. You just need to click on the form name or image, then you will see the editor's page with the code and the result.

Registration forms | Contact forms | Feedback forms | Evaluation forms | Application forms | Booking forms | Career forms | Complaint forms | Surveys

Registration Forms

Contact Forms

Feedback Forms

Evaluation Forms

Application Forms

Booking Forms

Career Forms

Complaint Forms

Practice Your Knowledge

Quiz time: test your skills.

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

• HTML Basics

Related Resources

• HTML Layout Templates
• Javascript Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Vue.js Basics
• Python Basics
• Java Basics
• NodeJS Basics

Popular Tutorials

Learn python interactively, popular examples.

• Introduction
• What is HTML?
• HTML Basics
• HTML Web Design Basics
• HTML Paragraphs
• HTML Headings
• HTML Comments
• HTML Unordered List
• HTML Ordered List
• HTML Description List
• HTML Line Break
• HTML Pre Tag
• HTML Horizontal Line

HTML Inline

• HTML Block and Inline
• HTML Images
• HTML Italic
• HTML Superscript and Subscript
• HTML Formatting
• HTML Meta Elements
• HTML Favicon

HTML Form Elements

• HTML Form Action

Semantic HTML

• HTML Semantic HTML
• HTML div Tag
• HTML aside Tag
• HTML section Tag
• HTML footer Tag
• HTML main Tag
• HTML figure and figcaption
• HTML Accessibility

HTML, CSS & JavaScript

• HTML Layout
• HTML Responsive Web Design
• HTML and JavaScript

Graphics & Media

• HTML Canvas

HTML Miscellaneous

• HTML Iframes
• HTML Entities
• HTML Quotations
• HTML File Paths
• HTML Emojis
• HTML Symbols

Web Tutorials

HTML Form Action: POST and GET

HTML Input Tag

CSS Form Styling

An HTML Form is a section of the document that collects input from the user. The input from the user is generally sent to a server (Web servers, Mail clients, etc). We use the HTML <form> element to create forms in HTML.

• Example: HTML Form

The HTML <form> element is used to create HTML forms. For example,

Browser Output

A form contains special interactive elements that users use to send the input. They are text inputs, textarea fields, checkboxes, dropdowns, and much more. For example,

To learn more about the various form controls, visit HTML Form Inputs.

• Form Attributes

The HTML <form> element contains several attributes for controlling data submission. They are as follows:

The action attributes define the action to be performed when the form is submitted. It is usually the url for the server where the form data is to be sent.

In the above example, when the form is submitted, the data from the form is sent to /login .

The method attribute defines the HTTP method to be used when the form is submitted. There are 3 possible values for the method attribute:

• post - It is used to send data to a server to update a resource. <form method = "post"> ... </form>
• get : It is used to request data from a specified resource. <form method = "get"> ... </form>
• dialog : This method is used when the form is inside a <dialog> element. Using this method closes the dialog and sends a form-submit event.

To learn more about HTTP methods GET and POST, visit HTML Form Action: POST and GET .

It specifies where to display the response received after the form is submitted. Similar to the target attribute in <a> tags, the target attribute has four possible values.

• _self (default): Load the response into the same browser tab. <form target="_self"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>
• _blank : Load the response into a new browser tab. <form target="_blank"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>
• _parent : Load into the parent frame of the current one. If no parent is available,it loads the response into the same tab. <form target="_parent"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>
• _top : Load the response into the top-level frame. If no parent is available, it loads the response into the same tab. <form target="_top"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>

It specifies how the form data should be encoded for the request. It is only applicable if we use the POST method.

In the above example, data from the form will be encoded in the x-www-form-urlencoded format (which is the default encoding format).

It specifies the name of the form. The name is used in Javascript to reference or access this form.

The above form can be accessed in javascript as:

Although it is possible to use name to access form elements in javascript, it is recommended to use id to access the form elements.

If the novalidate attribute is set, all validations in the form elements are skipped.

In the above example, the form will be submitted even if we enter some invalid value to the email field, such as Hi .

Table of Contents

Our premium learning platform, created with over a decade of experience and thousands of feedbacks .

Learn and improve your coding skills like never before.

• Interactive Courses
• Certificates
• 2000+ Challenges

Related Tutorials

Programming

What's covered in this module

Html tables, css for tables, about tables, forms: client side and server side, css for forms, special form fields, in this module.

This week we are covering two chapters in the book. Chapter 8 is about tables and Chapter 9 is about forms. In the lab for this week you will add both a table and a form to your portfolio website.

A table has rows and columns, and looks like this:

As you would expect, the top row of the table explains what you will find in each column. By default, the text in the top row is bolder than the other rows.

To code tables, you need four new elements. The columns are called “cells” and are inside of the rows.

• <table> table
• <tr> row
• <th> header cell
• <td>table cell

The code for a table looks like this:

Use the <table></table> tags around the entire table. 

Use the <tr></tr> tags to start and end a row inside of the table.

Use the <th></th> tags to create a header cell in the row.

Use the <td></td> tags to regular cell inside of the row. 

The image below demonstrates what the code is doing. As you can see the <table> tags go around the entire table, the <tr> tags around each row, and then there are <th> or <td> tags around each cell in the row.

A table without any CSS would look like this in most browsers:

As you can see, there are no border lines on the table cells. We will fix that by adding a border to the cells with some CSS:

Note that we need to add the border to both the header row cells <th> and the regular cells <td>. The result of adding the border lines looks like this:

Yikes! That doesn’t look too pretty! We need a bit more CSS at a minimum to make the table look nice. We need more spacing (padding) and we need to remove the lines in between each cell. We do that with the border-collapse property. Putting it all together, the minimum CSS for a table would be something like this:

There is a lot more that we can do to style tables, as you will see in the video and exercise below. You can even add images to tables!

Video Demonstration: HTML Tables

Exercise: Tables

• Open JS Fiddle
• Create a table with one header column and two rows using:

<table><tr><th><td>

• Add a border to the table and the cells in CSS by selecting td and th
• Add: border-collapse: collapse; to the table in CSS
• Style the table header (th)

You can also insert other HTML elements inside a table cell, like images or another table. You can also style each row or cell separately by adding classes to specific cells. Here is an image link if you would like to try inserting an image.

Here is a 200 x 200 pixel image link: 

https://webdevstudents.com/wp-content/uploads/2021/02/axolotl.jpg

Your JSFiddle should look something like this, but with your own colors and content.

Keep your JSFiddle handy because you will be able to use it for the lab assignment.

How Developers Use Tables on Websites

Tables aren’t generally used on websites because they aren’t responsive and don’t fit well on smartphone. Half of websites are viewed on a smartphone, making most tables obsolete. However, small tables that can fit on a mobile device (less than 300px in width) can still be used. 

Tables can still be used on desktop or tablet-only applications. For example, if a website is for internal use only and all users use tablets or desktops, tables could be used for internal reporting.

Bootstrap and other responsive website techniques that stack content replaced the need to use tables for positioning. Working in tables has been replaced with grid systems. Grid systems allow you to create content that stacks on mobile. Bootstrap is the most commonly used grid system and we will learn Bootstrap starting with Module 11.

HTML Email and Tables

Even though tables are never used for website layout, they are used extensively for HTML email. The coding of HTML emails is almost shocking…HTML email developers use tables nested inside of tables. HTML tables seem to be the only way to position HTML email so that it works across email clients.

I have seen at least a few entry-level jobs for HTML email developers. The coding is rather tedious, and so it could be your foot into the door of a programming shop. The coding is challenging because each email client (eg. Gmail, Outlook, MacMail) interprets the code differently. So you may have an email that looks great in Gmail, but is a mess in Outlook.

If you ever need to create an HTML email, Tuts Plus has a great tutorial on it: HTML Email Tutorial .

If you want to send out broadcast emails, MailChimp has a generous free level. MailChimp, or any email service, will provide you with a form to use on your website to capture subscribers.

The other big topic in this module is forms. To understand the coding of forms, you need to know both a server-side language and a client-side language. This course only teaches you the client-side languages: HTML, CSS and JavaScript.

So, what is a server-side language? Let’s look at a form example. Here is the form for more information on Saint Paul College. Go to this link – https://www.saintpaul.edu/wtce/contact-us – and scroll down to the form. 

Don’t submit the form, just look at it.

What would happen if you were to hit the SUBMIT button?

If you were to hit the SUBMIT button the server would the following would happen:

• The server sends a message back to the you on the screen, eg. “Thank you for submitting the form. We will be in touch.”
• The server sends an email to the person responsible for taking action on your message. 
• The server may send an email to the person who submitted the email.
• The server adds a record to a database.

These examples are all handled in server-side programs. The form itself is the client-side. The table below may help to explain the difference between client side and server side.

What are forms used for?

• Contact Forms
• Search of a database or a website
• Placing an order at an online store
• Subscribing to a newsletter
• Online calculators

The server-side languages do not use the .html extension. They use other extensions, like .php or .asp.

This image may help to explain the server-side vs. the client-side.

The form is made on the client-side in HTML. When the submit button is hit, a server-side PHP script sends a message back to the form submitter.

Note to Saint Paul College Students: This course (CSCI-1450) only teaches the Client Side of a form, not the Server Side of the form. Take CSCI-2442 in the fall to learn Server Side coding, including the languages PHP and MySQL. These classes are part of the Web Development Certificate .

Even though this course isn’t teaching you the server-side programming required for forms, there are free form tools available online that you can use on your websites. These online tools can help you bridge the gap until you learn server-side form processing. Even if you learn server-side form processing, you still may benefit from using these online forms. These online forms will have very strong security, and security is a major part of server-side processing.

• Surveys: https://www.surveymonkey.com/pricing/
• Newsletter Signups: https://mailchimp.com/pricing/entrepreneur/
• Contact and other forms: https://www.jotform.com/pricing/
• https://formspree.io/plans

Here is the code for a simple HTML form to collect email addresses.

This code creates a simple email form that looks something like this:

As you can see, an HTML form starts and ends with the <form> tags. We will place form fields inside of the <form> tags.

The most common form tag is the <input> element. It is a self-closing tag.

The <input> type Attribute

The <input> element requires an HTML attribute that specifies what type of form field it will be. This form has three different attributes.

Here is a short list of the most common type attributes:

• type=”text” is used for regular text fields, like name and address. 
• type=”email” is used for email addresses and the browser will check to see if an email address is entered.
• type=”submit” is used to submit the form.
• type=”reset” clears the form
• type=”password” hides the field

More <input> Attributes

In addition to the type attribute, here are the most common input attributes. Of these three, the name is the most important. Without the name attribute, the form won’t process, because that is the link to the server-side code. 

name: the key in a key/value pair sent to the server (required for form processing)

id: used for javascript, usually the same as the name field. This field is required for the form label. I generally give it the same value as the name field.

placeholder: text that displays in the field before typing. This one is optional, but can be very helpful to the form user.

With the name, id and placeholder, the <input> code looks like this:

The back-end developer will tell you what to use for the name attribute. In order for the form script to work, the HTML form name must be what the script is expecting it to be named. Note that the name value uses an underscore instead of dash. That is because the name field is going to be used in another language. A common server-side programming language is PHP, and PHP uses an underscore instead of a dash between words.

Form Labels

It is important for you to use a field <label> so that screen readers can read the form fields. The code looks like this:

Note that in the example above, “first_name” is used for the for , name , and id attributes. Screen readers link the label for attribute to the input id attribute, so it is critical that the for and the id have the same word. To make it easier, when I create a form field I use the same word for the for , name , and id . (I then use the same names in the database table, and in the PHP I use the same word for the variable names, but with a $ in front of it, like $first_name. By using the same word, I make it easier to avoid making errors and I can cut and paste code more quickly.)

The <form> Attributes

The <form> also requires two attributes, an action attribute and a method attribute. In the code below, note the additions in the opening <form> tag.

The action attribute, in this case, “submit-form.php” is used to call a server-side program when the submit button is clicked.

The method attribute has two options.

• method=”get” – default value-form data passed in url
• method=”post” – more secure- form data passed in http entity body

We will use method=”post” for the lab. The action URL’S will be provided. The action urls use a published PHP script. 

Know some programming? We will be using the a PHP script for processing the lab assignment. Here is a screenshot of the code:

When you attach this action attribute, you are calling the code in this script. Note that the PHP is embedded in the HTML with <?php ?> tags. First the captured fields are turned into variables, then the variables are displayed back with “echo”. If you know other programming languages, “echo” in PHP is like “print” in other languages.

Demonstration Video: Form HTML

Exercise: Simple Form

You can do this exercise in JSFiddle or in your Website Template.

Step 1: Let’s add the form tags and its attributes.

• Use this action: action=”https://webdevstudents.com/portfolio/submit-form.php”
• Use the Post method: method=”post”

Step 2. Let’s add some fields to this form.

Here is the first form field to get you started: 

Add a last_name, email, and phone fields. Use these exact names for the id, name, and for attributes. The PHP script will be looking for these exact words.

Add some <br> tags so the form lays out nicely.

Place the submit and reset fields at the bottom. 

Your JSFiddle should look like this:

Fill out and submit your form. These are the fields the form action recognizes:

If you wrote the code correctly, you should see the four entered fields back on the screen:

We need some new CSS selectors in order to differentiate between the types of form fields. 

Here is the CSS to add a red background color to the submit button:

Why is the syntax type=submit instead of type=”submit” ?  Because this is the CSS language, not the HTML language.

Video Demonstration: Styling Forms with CSS

Exercise: Styling Forms with CSS

You can add styles to the type attributes to distinguish between submit, cancel, and other types of inputs. 

• Add some CSS styles to the <input> fields.
• Add a red background color to the submit button.

Your JSFiddle should look something like this:

As you probably know from forms you have filled out, there are many more types of form fields. Here are some additional types we are going to study:

• Use <textarea> for larger blocks of text.
• Use <select> and <option> to make a dropdown list.
• Use <input type=”checkbox”> for checkboxes.
• Use <input type=”radio”> for radio buttons.

<textarea></textarea>

A <textarea> field looks like <input type=”text> except that the person filling out the form can write a longer response. You use <textarea> instead of <input type=”text”> when you want the form user to write a longer response, like a sentence or a paragraph.

Just to keep you on your toes, <textarea> is NOT a self-closing element.  

The code looks like this:

Checkboxes, surprisingly, use the <input> with a type of checkbox. The code for a set of checkboxes looks like this.

Note that the value attribute is different for each checkbox. The value is what is saved to the server. The name attribute is the same for all the fields.

Radio Buttons

Radio buttons, like checkboxes, use the <input> with a type of radio. The code for a set of radio buttons looks like this:

Just like with the checkboxes, the value attribute is different for each radio button. The value is what is saved to the server. The name attribute is the same for all the fields in the set.

Dropdown Lists

To create a dropdown list, you need to use two HTML elements…the <select> overall, and the <option> for each choice. The code looks like this:

Lab Assignment

If you are in the CSCI1450 course you have been doing the Pacific Trails lab from the textbook. That lab assignment is like following IKEA instructions, where you need to follow each step exactly or risk having a problem in the future. Going forward, there won’t be step-by-step instructions. You need to apply the HTML and CSS you have learned in class to develop your homework.  Part of your lab grade will be your effort to style your website. 

In real life coding, there aren’t step-by-step instructions. That is why programming careers are so much fun, and also why they pay well. Most students use the portfolio we will start in this module as their final website project, which we will publish on Github. Your audience is potential employers.

When I teach this course at MinnState, and when the course calendar permits it, we have a review week in between Module 6 and Module 7. The lab assignment for that week is to clean up the Website Template, to get ready for Module 7. Even if you aren’t taking the college course, you may want to do the Template Lab before starting Module 7.

Template Lab

Final Project Websites

• Final Project Description
• Final Project Checklist

Additional Presentations

• The Template Lab (Between Module 6 and 7)
• Study for the HTML/CSS Exam
• PHP Websites
• The Best Internship

Bootstrap Starter Pack

This is a starter pack of Bootstrap HTML file using Bootstrap navigation. It includes a page with columns, a photo gallery (with modal pop-up) that automatically adjusts the number of images in a column based on the width of the screen, a slider, and responsive embedded video using Bootstrap.

Download Bootstrap 4 Template

Learn HTML Code, Tags & CSS

HTML Web Forms Tutorial For Coding Beginners

Web forms are used by virtually all websites for a wide range of purposes. Users of forums and social networks use forms to add content and interact with other users. Websites that can be customized to create a personalized experience, such as customizable newsfeeds, use forms to allow users to control the content that appears on the page. And nearly every website uses forms to allow website visitors to contact the organization or person administering the website. Web forms are made possible by the integration of multiple technologies:

• HTML to create the form fields and labels and accept user input.
• CSS to style the presentation of the form.
• JavaScript to validate form input and provide Ajax -enabled interactions.
• Server-side languages such as PHP to process form data.

In this guide, we’re going to cover all of the HTML elements used to create web forms. We also have other tutorials that cover topics such as building a form , styling and designing forms , and ensuring form usability and accessibility .

• 1.1 Grouping Form Fields
• 2.1 Common <input type=""> Values
• 2.2 Less Common <input type=""> Values
• 2.3 New <input type=""> Values Added by HTML5
• 2.4 Common Input Attributes
• 2.5 New Attributes Added by HTML5
• 3.1 Pre-Populated Drop-Down Lists
• 3.2 Free Form Text Areas
• 3.3 Flexible Buttons
• 3.4 Form Elements Added in HTML5
• 4 Next Steps
• 5.1 How do you restrict a form field to only accept numbers?
• 5.2 How do you restrict a form field to only accept alphanumeric characters?
• 5.3 How do you make a form submit when the user presses enter?
• 6 Related Elements
• 7 Tutorials and Resources

Defining the Structure of a Form

Every web form must be wrapped in <form> tags. In most cases, all of the form fields will be nested between these tags. There are several attributes that may optional be used with the form element, including: accept-charset : This optional attribute is used to identify the character encodings acceptable to the server and code processing form input. If more than one encoding is specified, one space should be placed between each encoding. If left blank or not provided, the encoding will default to the same encoding as the document containing the form. action : This attribute is used to specify a URL where form data should be sent (for instance: http://example.com/form_file.php). This field was required prior to HTML5 but is now optional. autocomplete : Use this attribute if you want the visitors browser to suggest form responses based on saved entries. The default value is autocomplete="on" . If you turn autocomplete off you must also turn it off on every field that may allow autocompletion. enctype : Used to specify how form data should be encoded. Only used if the method attribute mentioned below is set to post . There are three possible values:

• application/x-www-form-urlencoded : The default value which replaces all spaces with “+” and converts all special characters to ASCII HEX values .
• multipart/form-data : Nothing is encoded. Input is uploaded to the server exactly as it is entered into the form.
• text/plain : Spaces are converted into “+” symbols, but not other characters are encoded.

method : Dictates the HTTP method a website visitors browser should use to submit form data. If post is specified, form data is enclosed in the body of the HTTP request. If get is specified, form data is appended to the end of the URL specified in the action attribute with a “?” symbol, data length is limited to 300 characters, and form input is visible and can be bookmarked. name : Similar to an id attribute, a name is a unique identifier that may only be used once within an HTML document and may be used to select the form with JavaScript or another scripting language. novalidate : Used to override the default validation of form data. target : Specifies where to display the response received after submitting the form.

• _self loads the response in the same frame.
• _blank opens a new window or tab.
• _parent is used when a form is nested in a descendant browsing context to load the response in the parent context and behaves the same as _self is there is no parent context.
• _top is similar to _parent but select the top level browsing context rather than the immediate parent context.

Grouping Form Fields

The <fieldset> element is used to group together related form fields. It may also be used to contain an entire form to provide a visual cue that distinguishes the form from surrounding content. The first element within a fieldset is usually a <legend> . The legend will be displayed a part of the fieldset border giving website visitors a clue about the purpose of a form. For example, if a contact form were nested within a web page full of otherwise unrelated content, the fieldset element could be used in combination with the legend element to isolate the contact form from the rest of the content both semantically and visually.

When rendered in the browser, the contact form would be clearly separated from surrounding content.

Additional paragraph content

The fieldset element is optional but is commonly used to group related elements on long and complex forms, or to isolate form fields from nearby elements when a form is presented along with non-form content. HTML5 added three attributes which can be applied to fieldset elements:

• disabled : Used to disable all of the forms in a fieldset. Note that we used this attribute in the example form above.
• form : Used to associate a fieldset with the id of one or more form elements. Note that browser support for this attribute is very limited.
• name : Associates a name with the fieldset .

The Input Element

Depending on the type of form you are creating, it’s entirely possible to have a form that only includes two types of elements: one form element and one or more input elements. The <input> element is used to create a variety of different types of input fields for form users to interact with.

Common <input type=""> Values

The input element is a very flexible element who appearance and behavior can change dramatically based on the type attribute applied to the element. The most common type values include: text : The default value for the type="" attribute. Defines a single line of text 20 characters wide. The width can be adjusted with the size attribute as you can see in the form code in our previous example. password : The password type is basically the same as the text field with the exception that characters entered into a password field are masked. radio : Radio buttons can be used to provide multiple options of which only one may be chosen. checkbox : Checkboxes are similar to radio buttons, but more than one selection can be active at a time. This means multiple values can be submitted with a set of checkboxes while a set of radio buttons will only accept one value. submit : The submit type value creates a form submission button. When clicked, the form will take the action specified in the action attribute associated with the form element. Many forms make use of just one or two input types, and most simple forms are built using just the types listed above. However, there are many additional types you can use to accept form data that doesn’t fit into any of the types listed above.

Less Common <input type=""> Values

These input types are less common than those listed above but are supported by virtually all browsers and can be used to build many different types of form inputs. button : If you want to run a script when a button is clicked, the button input type can be used to create a button which can be associated with a variety of actions. hidden : This attribute type is usually used simultaneously with the value attribute, which we’ll cover momentarily, to add a pre-defined value to every form submission. For example, if you have contact forms on five different pages you could add <input type="hidden" value="page_name"> to each form to submit the name of the page where the contact form was submitted from. reset : This type is used to create a reset button that will return all form fields to their default state. file : If you want to allow form users to upload and submit files, <input type="file"> will provide that capability. image : In the past, it was common to use an image as a submit button. While this type value is still valid, it is not used very frequently in modern web form design. Instead, use CSS to style the button.

New <input type=""> Values Added by HTML5

Several additional input types are defined by the HTML5 specification. Many of these types have limited browser support. So if you use them, be sure to check caniuse.com for browser support and provide adequate fallback options where appropriate. search : This is the proper type to specify if your form provides search functionality. Unlike most of the other types of inputs added in HTML5, type="search" is supported by all browsers. Just remember that this feature doesn’t actually provide search functionality, it just creates a form input field designed to be used as a part of a search feature. color : When this input type is specified it will display a colored-button that launches a basic color selector tool. Set the default color value by using the value attribute and a hex color code like this: <input type="color" value="#0000FF"> . number : This type produces a field for entering a number which has increment buttons on the righthand side of box. Limits can be placed on the range of acceptable entries with the max , min , and step attributes, but browsers that lack support for this element typically fallback to a standard text input that does not recognize these limits. range : Browser support for this element is pretty good with a few exceptions. Use this attribute to produce a slider which can be used to select a value within a specified range. For example, this code would produce a slider to select a number between 100 and 1000 in increments of 50: <input type="range" name="range" min="100" max="1000" step="50"> . You’ll need to pair the range element with another technique to provide a live preview of the selected value. Thankfully, HTML5 Doctor has a simple way to do this using the output element. Date and Time Types : HTML5 added a number of input types that can be used to specify time and date values. For example, the date type defines a control to enter a year, month, and day. To add time to the date input, use datetime-local . If you want time without date information use the time input type. Less specific input types include the month and week options which can be used to select a week or month within a year without specifying the day or time. Browsers have been slow to add support for this type, so be sure to check for browser support and provide fallbacks if you use this type of input. Contact Detail Types : Broad support is available for the three input types used to collect pertinent details like email addresses ( email ), telephone numbers ( tel ), and website URLs ( url ).

Common Input Attributes

While the type attribute is by far the most-used and most useful input attribute, there are several other attributes you will need to know to build useful forms. name : The name assigned to an input element will be submitted along with the value entered into the associated field. In other words, if the value “Fred” were entered into an input element with this code <input type="text" name="first_name"> the value submitted would be “first_name=Fred”. value : The value of an input element performs a different function depending on the type of input it is applied to. When applied to the submit , reset , or button types the value is used as the text on the button. When applied to text fields it provides the default value associated with the field. When associated with a checkbox or radio button, the value provides the value that will be associated with that field if selected.

readonly : When readonly is applied as an attribute of an input element the value in the field cannot be changed. JavaScript can be used to remove the readonly attribute after some other action is taken, such as clicking a button or selecting a checkbox. For example, readonly could be applied to a submit input type and removed when a checkbox was selected confirming that the user accepted the website’s terms of service. disabled : We used this attribute with example form embedded earlier in this tutorial. Use this attribute to disable an entire form, fieldset, a single field. size : Use the size attribute with text input types to specify the visible width of the field without limiting the number of characters that may be entered into the field. maxlength : If you don’t want to accept more than a certain number of characters in a given field, use maxlength to limit those fields to a defined number of characters. checked : If you want a checkbox or radio button to be preselected when a form loads apply this attribute to that input element. These attributes have broad support and are used commonly with forms you encounter every day.

New Attributes Added by HTML5

HTML5 added many new attributes which can be associated with input elements. Browser support for some of these elements is limited, so be sure to check for support and provide fallback options for users of unsupported browsers. autocomplete : If your form includes common fields, leaving autocomplete on will allow the visitors browser to suggest entries based on previously completed forms. autofocus : Use this attribute to identify the form field that should be in focus when the form loads. multiple : The multiple attribute can be used with email and file input types to allow form users to input more than one value. When used for email inputs, more than one email address can be submitted by separating each address from the next with a comma. When used for file inputs, multiple files may be selected and submitted simultaneously. pattern : There may be times when you want to specify that the value of an input must meet certain criteria. For example, you may want to require that a password field includes at least one uppercase letter, one lowercase letter, one number, and meets a minimum length requirement. The pattern attribute can be used to create expressions against which input values are validated. Writing these expressions, referred to as Regular Expressions or RegExp, is beyond the scope of this tutorial. You can learn about regular expressions at Wikipedia and then write and test your expressions for free at RegExr . placeholder : Most forms include placeholder text which disappears as soon as you click into the field or begin typing. Use this attribute to add and define placeholder text for any inputs that accept text. required : If certain fields in a form are required, use this attribute to prevent submission of incomplete forms. form : If you ever need to place an input element outside of the form element, you can associate the displaced element by using the form attribute and applying a value that matches the id attribute applied to the form. Modify Form Submit Button Behavior There are five attributes that can be applied to submit and image input types to override the attributes applied to the parent form element. These attributes include:

• formaction : Define a different URL from the one identified in the parent form’s action attribute to process a form submission. Often used when forms may be processed in more than one way to provide a variety of form submission options.
• formenctype : Specify an encoding type that should be used for form submissions. The value used overrides the value applied to the enctype attribute of the parent form element.
• formmethod : This attribute is used specify either the get or post method value and will override the method attribute applied to the parent form .
• formnovalidate : If you don’t want form input to be validated when submitted you can use this attribute.
• formtarget : Override the target attribute applied to the parent form element by applying this attribute to a submit or image input type field.

Define the Size of type="image" : If you use the image input type to create a form submission button, you can control the size of the image using the height and width attributes. Alternatively, you can do the same thing with CSS. Most developers and designers would recommend avoiding these attributes and controlling button appearance with CSS . Set Limits and Increments for Numeric Values : You can use the min , max , and step attributes to define minimum and maximum values as well as acceptable increments falling between these values for any input that accepts numeric values.

Drop-Downs, Text Areas, & Buttons

Inputs aren’t the only elements that can be used to create form fields. Other types of elements can be associated with forms to create drop-down lists or options, free-form text areas, and flexible buttons.

Pre-Populated Drop-Down Lists

To create a drop-down list of pre-populated options from which a website visitor can select an option, use the select element to create the field, and nest multiple option elements to create the various options that should appear in the drop-down menu. For example, to create a drop-down menu of pretentious color options for a fictional e-commerce store, the following code could be used:

Note that the value is what will actually be submitted with the form while the text between the opening and closing tags is what is presented to the visitor completing the form. For example, if a visitor selects “Lush Forest” the actual value submitted with the form will be green . Here’s how our drop-down list shows up in the browser:

Free Form Text Areas

All of the text inputs we’ve seen so far, such as <input type="text"> , only accept a single line of text. However, if you want to create a larger text area for longer text input a single line input field isn’t going to work. The textarea element is the correct choice for creating a large text input area capable of accepting text input that won’t render well on a single line. There are three parts to a textarea :

• The textarea is created by inserting opening and closing tags. Any text nested between the tags will be loaded in the text area when the form loads and will be submitted along with the form unless the visitor submitting the form deletes the text out of the textarea .
• If you want to define the size of the text area use the rows attribute to define the number of rows of text that should able to be displayed without resizing the text area.
• To set a predefined width use the cols attribute. The value applied will be the number of characters that will appear on a single row before wrapping to the second row.

Text area elements are resizable. However, the rows and cols attributes will define the size of the textarea when it is first rendered by the browser and will also set the minimum space the area may be resized to fit.

This code will produce two identically sized text areas that are three rows tall and can accept 60 characters per row. They will be resizable to any size larger than the default size. Note how the placeholder text was added to the first with the placeholder element but simply nested between the opening and closing tags in the second example. Below you can see how these two bits of code are rendered.

While textarea size can be specified using ‘rows’ and ‘cols’, it is a better practice to use CSS to style and size text areas. Many of the attributes that can be applied to input elements can also be applied to textarea elements. In addition, to those included in our example above, attributes that can be applied to text areas include: autofocus , disabled , form , maxlength , name , readonly , required , and wrap .

Flexible Buttons

There are two ways to create buttons for forms:

• <input type="button/submit/reset/image">
• <button type="button/submit/reset/"></button>

We’ve already talked about the input element and the different types that can be used to create buttons. So why is there another button? There are least two ways that button elements are different from their input cousins.

• Because buttons are made with an opening and closing tag, different types of content – usually text and images – can be nested between the opening and closing tags and will be rendered on the button.
• Buttons do not have to be associated with a form element. They can be used as standalone buttons to initiate scripts, as the content of an anchor element, and to perform other actions.

Form Elements Added in HTML5

Three new form elements were added in HTML5: datalist : Use this element to provide a list of suggested autocompletion values for an input element. In order to use the datalist element, first create an input element with a list attribute. Then create a datalist element with an id attribute. The value applied to the input list attribute must match the datalist id. Values are added to the datalist by adding option elements between the opening and closing datalist tags. Here’s an example of how this all works:

When we render that code in the browser and input element will appear. If we begin typing, autocomplete suggestions will be made based on the options included in the datalist. Note that users submitting the form aren’t limited to selecting from one of these options. They can still choose to type a value that is not an included option if they wish to do so.

output : Use this element to display the result of a calculation or user input. Associate it with an input element by using the for attribute with a value that matches the id of the relevant input element, or associate it with a form by adding a form attribute using a value that matches the id of the relevant form . The output element can also be paired with the range element to let form users know the exact value represented by the current position of the slider of a range element. Using the output and range elements in this way is beyond the scope of this introductory tutorial, but if you want to use these two elements together you can learn more about this technique at the HTML5 Doctor .

This tutorial has provided an overview of the elements used to build forms for the web. The next step is to try out some of the knowledge you’ve gained. Other tutorials in this section will walk you through the process of creating a reservation form , styling and designing forms , and ensuring that your forms meet usability and accessibility guidelines .

Frequently Asked Questions

How do you restrict a form field to only accept numbers.

In the past, restricting a field to numbers only required the use of JavaScript. However, with the release of HTML5, it’s now simple to limit a field to numeric input only. Just apply the number value to the type attribute of the applicable input element. For example:

When rendered, produces a text input field that will only accept numbers.

How do you restrict a form field to only accept alphanumeric characters?

In the past, the only way to limit field input to alphanumeric characters was to use jQuery or JavaScript and craft a custom function. However, HTML5 added the pattern attribute for input elements which can be used to restrict a form field to accept alphanumeric input only. Here’s the code that will do the trick:

In this case, the pattern element will accept lowercase letters, uppercase letters, and numbers. The second part of the value in curly braces stipulates how many total characters may be entered into the field. Let’s see how that looks in the browser.

The way it works is that when you attempt to submit values that don’t meet the specified pattern the title attribute is displayed. So you should put some instructions inside the pattern attribute so that users can figure out what they’ve done wrong. Browser support for this relatively new attribute is really pretty good. IE 9 and earlier versions of IE don’t support it and Opera Mini also lacks support. However, all other browsers do support the attribute.

How do you make a form submit when the user presses enter?

If you’ve come across a form that does not submit when you press enter, then someone has intentionally designed the form to behave that way – and they really shouldn’t have done that. Web accessibility specs are clear: design forms to allow implicit submission. What is implicit submission? Submitting a form by pressing enter. Browsers are designed to support implicit submission. Here’s how it works. Take this form for instance:

If you were focused on any element in that form and pressed enter, the form would be submitted. This is implicit submission and all modern browsers support this behavior. Use the button element in the form and you don’t even have to use the submit value for the type attribute. Hit enter while focused on any element in this form and the form will still be submitted.

So how do developers break this behavior? One way to get around this behavior–and to be clear, we don’t recommend this–is to drop the form elements. The browser knows what to submit by grouping together everything between the form tags. Drop those tags and the browser doesn’t know what to submit. Another way some developers manipulate browser behavior is to use CSS to make buttons rather than proper HTML elements, like this.

Which, when rendered by the browser, would produce a button that looked like a button but did not do anything when enter is pressed.

Usually, developers have good intentions when they do things like this. Typically, what they’re trying to do is tie form validation to an onClick JavaScript event. Form validation is a good thing, but creating a barrier to accessibility in the name of form validation is not a good thing. So, what should you do instead of disabling implicit submission? Leave implicit submission intact and use JavaScript to add an event listener to each field. Use the event listener to trigger form validation like this.

That code leaves implicit submission intact, but still runs validation code when the user presses enter.

Related Elements

Tutorials and Resources

• Case Studies
• Our Pricing
• Do my Programming Homework
• Java Homework Help
• HTML Homework Help
• Do my computer science homework
• C++ Homework Help
• C Homework Help
• Python Assignment Help
• Android Assignment help
• Database Homework Help
• PHP Assignment Help
• JavaScript Assignment Help
• R Assignment Help
• Node.Js Homework Help
• Data Structures Assignment Help
• Machine Learning Assignment Help
• MATLAB Assignment Help
• C Sharp Assignment Help
• Operating System Assignment Help
• Assembly Language Assignment Help
• Scala Assignment Help
• Visual Basic Assignment Help
• Live Java Tutoring
• Python Tutoring
• Our Experts
• Testimonials
• Submit Your Assignment

Create An HTML Form Design With Examples

So, you are searching for how to create an HTML form for your web development project? Don’t worry! We are here to help you out.

Web forms or HTML forms are useful in collecting data and information in the form of user input that we can process later. This can be a review, email ID, address, contact, and more. In this article, we will tell you how you can create HTML forms to collect information from your users.

If you’re curious to know how to do this or looking for HTML homework help related to this topic, then this article is for you.

Summary Of The Article:

An HTML form stores information provided by the users with the help of responsive controls.

With the help of various input elements, we can collect data like username, password input, and text input, and ask the users to select options from a checkbox or a list.

With HTML, we can create a basic structure of a form. This can then be made visually appealing with the help of CSS and JavaScript.

CSS forms add styling properties, while JavaScript can make it dynamic.

There are a lot of elements and tags in HTML to make detailed and long forms.

What Is An HTML Form? Why Is It Used?

In Hyper-Text Markup Language or HTML, forms are documents that are used to store or collect user input. This user input is then sent to the server for further processing using interactive controls.

HTML forms can contain a variety of input types like user name, contact, email, address, additional comments, etc. Forms in HTML can also be of various types like a registration or login form, a payment form, etc.

HTML forms or web forms bring responsiveness to your website. Therefore, they are a great way of facilitating user interactions and bringing life to your web page.

Let us now discuss the basic structure of an HTML form. Read below to learn more about HTML forms!

What Is The Basic Structure Of An HTML Form?

In this section, I will tell you about the components of an HTML form and how these are arranged to successfully create it in HTML. Continue reading to know about it!

The <form> tag in HTML

An HTML form is created by using the ‘form’ tag. It is represented by: <form> and contains different attributes.

All the lines of code written within the form tag represent the form elements. It needs both the opening and closing tag. Therefore, we can write it in the following way:

The elements of an HTML form include a checkbox, text box, submit buttons, radio buttons, drop-down menus, and more. All these elements help in seamless interaction and accurate data input and storage.

The <input> element in HTML

The main purpose of an HTML form is to collect user input. But how is it done? For this, we have a form element named the <input> element.

The input element is the most basic element that helps us to get the form data. With the help of its various attributes, we can collect different information. Some of the attributes related to <input> are:

Type attribute

Name attribute.

We will discuss more about these in further sections. A simple example representing the <input> element is given below.

HTML Example:

The output or the web form created with this code is given in the image below.

We can see that the <input> element created a rectangular box for us to specify the user input. Notice the type attribute and the name attribute here. We will get to know more about these in depth below. This was just a simple design, we will create more detailed HTML forms in the further sections.

Essential Elements And Their Attributes In HTML Web Forms

HTML provides us with various elements to collect and organize the form data. Input elements and Input fields can help us enhance our HTML form. Understanding these elements and each attribute allows us to make HTML forms functional.

Now, let us get to know about the commonly used elements and their attributes below.

The <form> element

This is used as a container for all the input elements in an HTML form. It consists of the following attributes:

action attribute: An HTML form’s action attribute specifies the URL for processing input data submitted by the user.

method attribute: It specifies the HTTP method to process form data. For example: the GET or POST method.

enctype attribute: It specifies the type for data encryption .

Modifying this in the code example gives us the following HTML form structure.

The <input> element

The input element is responsible for creating interactive controls for user input. It has some common control types and attributes. Let us see both of these below.

Attributes of <input>

type attribute: The type attribute in HTML specifies the input type for the form data.

name attribute: This attribute specifies the name of the input and it is used to identify form data when it is submitted.

value attribute: It specifies the initial value of the input.

placeholder attribute: It specifies the text displayed in place of the input when it is empty.

Common types for <input>

text: For single-line text input

password: For password input. It hides the value entered by the user in the password field.

email: For validating the email format.

number: For numeric input type.

radio: For letting the user select one option of many.

checkbox: For letting the user select one or more than one option.

submit: For the submit button.

Now, let us see how and where we can include these attributes and control types in our HTML code and see how our web form looks.

After including the necessary type attributes, we will see the below-given changes in our form. A new input field for email ID is added to our HTML login form. We can also see the placeholder text in place for the input.

The <textarea> element

We know that the type ‘text’ is used for single-line text input. But what if we have to take multi-line input from the user? For this, we have the <textarea> tag. Let us see some of its attributes as well.

Attributes for <textarea>

name attribute: It specifies the name of the text area.

rows: It specifies the number of visible lines for the input text.

cols: It specifies the visible width for the text area.

Now, let us also add this element tag to our HTML form code. Have a look at the example code.

Let us now have a look at the resulting HTML form after adding the text area form element as the input field to it. Now, you can type in multi-line input type as form data. The image below represents our output HTML form.

The <select> and <option> elements

The select and option tags are used to create a drop-down menu and define the options in the list respectively. Now, let us have a look at some of the attributes for the same.

Attributes For <select> and <option>

name attribute: For the name of the select element.

multiple: It is used in case you need to select more than one element.

Let us modify this form element in our HTML code and see how does our form looks. The code is given below.

Now that we have added our list of options to our form, the user can select these options and the selected one becomes our input. The following image shows how the HTML form looks.

The <label> element

The form label element or tag is used to provide a label for the input element. This enhances accessibility. It is just like a caption that you can use for a particular element. The code snippet shows how we can use it in forms.

The <button> element

So far, we have discussed a lot of common form elements. But, what about that one element that fulfills the purpose of HTML forms? I’m talking about the element that allows form submission.

The <button> element represents a clickable button. In our case, it can be the submit button, the reset button, the cancel button, or any other. For example, in a payment form, you can have the pay button and the exit transaction button.

So, let us add the submit button to our form. The syntax to make a submit button is given below.

After including this in our code, we will be able to see a simple button to submit the user data. When the user clicks on it, all the form information is sent to the server. Let us see how our HTML form finally looks with the submit button and filled input fields.

HTML Form For Payment Card Checkout With Code

In the above section, we were taking the example of a basic login form. Now, let us try to create an HTML form for the checkout process. For this, we first have to decide what input fields do we need.

In this case, the input fields can be the following:

Card number – numeric input type

Card-holder name – text input type

Expiry Date – date

CVV – password input type

Remarks – text area

Checkbox for additional input. – checkbox element

We will also include two buttons:

Now, let us implement these to create an HTML form. The example code for it is given below.

Checkout Form

Here, we have used a form label for each element and also included the month and year type as the input field for the expiry date. Let us now see the output form that we get.

But, this structure doesn’t look that clean. Here is when we can introduce CSS in it. We can create a CSS form for this checkout process. CSS forms gives style to our web forms and make it more structured. You can also make a form using pure CSS.

So, let us modify the above code and add style to it. The modified code for the CSS form is given below.

Let us also compare the new form output using HTML and CSS together with the previous one that was only using HTML. The new form is given below.

Looks much clear, right? This is how you can create HTML forms!

Conclusion:

So you saw how to create HTML forms. We also discussed various input fields like password field, text input field, etc. Using CSS while designing forms also makes them more visually appealing and clear. With a clean background and proper styling, we can create a well-designed form.

So, why don’t you get started and create an HTML form? Perhaps, a responsive contact form with radio buttons and a progress bar? And in case you require any assistance, just submit your request to us at codingzap.com

HTML forms are a way to collect a user’s information and process it. This can be a comment, a subscription form, a payment form, etc.

Each user input is written in an associated input field that specifies what kind of content it is.

We can also include radio buttons, checkboxes, password input, etc as per the requirement of our form.

To make the form more visually appealing and clear, we can add styling using CSS as well.

Samragyi Vats

Leave a comment cancel reply.

Your email address will not be published. Required fields are marked *

Our best Coding Help Services

• Do my programming homework
• Computer Science hw help
• Database homework assistance
• HTML coding help
• Android Help
• Java Assignment Help
• C programming Help
• Python Coding Help
• Assembly Coding Help
• Node.Js help
• C Sharp help
• Machine Learning task help
• PHP project help
• Operating System Help

CodingZap is founded back in 2015 with a mindset to provide genuine programming help to students across the globe. We cater to a broad range of programming homework help services to students and techies who are struggling with their code.

Programming Help Expertise

Contact us now.

• HQ USA: 920 Beach Park Blvd, Foster City, USA
• +1 (332) 895-6153
• [email protected]

Important Links

Copyright 2015-2024 CodingZap Technologies Private Limited- All rights reserved.

• +919035109861

Forms in HTML5

The HTML elements that allow you to build interactive forms

Share this page

New! My 44-page ebook " CSS in 44 minutes " is out! 😃

Defines a clickable button .

Example: Copy

Submit form <button> Submit form </button>

Defines the unique identifier for that button within the form. It allows the server to access each button's value when submitted.

"submit_button"

The name value must be unique within the context of a <form> container.

It can only contain alphanumeric characters a-z A-Z 0-9 and some special characters like - _ … but no space.

The value sent to the server when submitting the form.

The server will receive the value primary .

Defines the button type.

The button sends the form data to the server.

The button resets the form.

Disables the button.

Sets focus on the element when the web page loads.

Defines a group of controls within a form.

Subscribe to the Newsletter Ok <form action= "/subscribe" method= "post" > <fieldset> <legend> Subscribe to the Newsletter </legend> <input type= "email" name= "email" > <button> Ok </button> </fieldset> </form>

Disables the controls the fieldset contains.

Defines an interactive form with controls.

Title Mr Mrs Miss

Phone number

Country China India United States Indonesia Brazil

I agree to the terms and conditions

Sign up Reset form

Defines which URL the form's information is sent to when submitted.

You can use a relative URL.

"https://htmlreference.io/contact"

You can use an absolute URL.

Defines the HTTP method used when submitting the form.

The form information is sent to the server as part of the request body .

The form information is sent to the server as part URL parameters : /contact?first_name=Alex&last_name=Smith .

The form's name when sent to the server. Useful when multiple forms are present on the same web page.

"sign_up_form"

The name value must be unique within the context of the whole web page.

autocomplete

Determines if the browser can autocomplete all the form's controls.

The browser will disable autocomplete functions. This can however be overriden for each control individually.

The browser will enable autocomplete functions. This can however be overriden for each control individually.

Try pressing "down" in this input. It will show previously entered email addresses.

Defines in which tab or window the clicked link will show up.

Opens in a new browsing context, which is usually a new tab .

Opens in the current tab.

Opens in the parent browsing context, or _self is there is none.

Opens in the top browsing context, or _self is there is none.

Defines the MIME type of the information sent to the server. Only works if the method is post .

"application/x-www-form-urlencoded"

The default value.

"text/plain"

For HTML5 plain text.

"multipart/form-data"

Needed when using an <input type="file"> element.

Tells the browser to not validate the form on submission.

Defines an interactive control within a web form.

<input type= "text" name= "first_name" placeholder= "e.g. Alex" >

Defines the type of form input.

Simple single line text input that accepts any type of character

Like a text input, but the browser will try to only allow valid email addresses.

On mobile devices, the email keyboard will show up.

Like a text input, but the browser will try to only allow valid numbers.

On mobile devices, the number keyboard will show up.

A toggle checkbox that can only be one of two states: checked or unchecked. The value is only submitted by the form if the checkbox is checked.

You can wrap a checkbox in a label, to increase the click area.

Notice how clicking the text toggles the checkbox.

Needs to be used used in combination with other radio buttons, so that they are mutually exclusive.

You link radio buttons through a similar name value:

Notice how clicking one deselects the other.

Submit button that is triggered when clicked or when pressing Enter.

Defines the unique identifier for that input within the form. It allows the server to access each input's value when submitted.

"first_name"

Placeholder.

Defines a non-selectable placeholder text that only appears when the input is empty.

"e.g. [email protected] "

You can hint at the format expected for the input.

As a best practice, it is recommended to have a label to describe the input, and use the placeholder to showcase an example:

Notice how the placeholder disappears on focus, hence the need to maintain a separate label.

Tells the browser that this input is required . Leaving it empty will show a warning.

You simply need to add the required attribute with no value:

The browser should show a warning if you try to submit the form with an empty text input.

Disables the input.

Defines a caption for a parent's content.

Defines a multi-line text control within a web form.

Defines the unique identifier for that textarea within the form. It allows the server to access each textarea's value when submitted.

Determines if the browser can autocomplete the textarea.

The browser will disable autocomplete functions..

The browser will enable autocomplete functions.

Defines the minimum amount of characters the textarea required to be valid.

You can use integers .

Defines the maxlength amount of characters allowed.

Defines a non-selectable placeholder text that only appears when the textarea is empty.

"e.g. Hello my name is Alex"

You can hint at the format expected for the textarea.

Defines the number of columns.

Defines the number of rows.

Defines how the text should be wrapped.

The text will always be wrapped depending on the cols value.

The text will only break when needed.

Disables the textarea.

Tells the browser that this textarea is required . Leaving it empty will show a warning.

Sets focus on the textarea when the web page loads.

Turns the textarea into a read-only element.

Enables the browser spell checker.

Share this HTML element

Share on Twitter Share on Facebook

• HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link, frame set & iframe.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

This the example for a basic payment form for the article How to structure an HTML form .

A payment form

HTML Form – Input Type and Submit Button Example

Forms are one of the most important parts of the web. Without them, there wouldn't be an easy way to collect data, search for resources, or sign up to receive valuable information.

You can embed forms on websites with the HTML form element. Inside the form element, several inputs are nested. These inputs are also known as form controls.

In this tutorial, we will explore the HTML form element, the various input types it takes, and how to create a submit button with which data is submitted.

By the end, you will know how forms work and you'll be able to make them with confidence.

Basic HTML Form Syntax

Html form input types.

You use the <input> tag to create various form controls in HTML. It is an inline element and takes attributes such as type , name , minlength , maxlength , placeholder , and so on. Each of these has specific values they take.

The placeholder attribute is important as it helps the user understand the purpose of the input field before they type anything in.

There are 20 different input types, and we will look at them one by one.

This type of input takes a value of “text”, so it creates a single line of text input.

Type Password

As the name implies, an input with a type of password creates a password. It is automatically invisible to the user, unless it is manipulated by JavaScript.

Any input with the type of email defines a field for entering an email address.

Type Number

This type of input lets the user insert numbers only.

Sometimes, users will need to pick one out of numerous options. An input field with its type attributes set to “radio” lets you do this.

Type Checkbox

So, with an input type of radio, users will be allowed to pick one out of numerous options. What if you want them to pick as many options as possible? That’s what an input with a type attribute set to checkbox does.

Type Submit

You use this type to add a submit button to forms. When a user clicks it, it automatically submits the form. It takes a value attribute, which defines the text that appears inside the button.

Type Button

An input with a type set to button creates a button, which can be manipulated by JavaScript's onClick event listener type. It creates a button just like an input type of submit, but with the exception that the value is empty by default, so it has to be specified.

This defines a field for file submission. When a user clicks it, they are prompted to insert the desired file type, which might be an image, PDF, document file, and so on.

The result of an input type of file looks like this:

This is a fancy input type introduced by HTML5. With it, the user can submit their favourite color for example. Black (#000000) is the default value, but can be overridden by setting the value to a desired color.

Many developers have used it as a trick to get to select different color shades available in RGB, HSL and alphanumeric formats.

This is the result of an input type of color:

Type Search

Input with the type of search defines a text field just like an input type of text. But this time it has the sole purpose of searching for info. It is different from type text in that, a cancel button appears once the user starts typing.

When the type attribute of an input tag is set to URL, it displays a field where users can enter a URL.

An input type of tel lets you collect telephone numbers from users.

You might have registered on a website where you requested the date of a certain event. The site probably used an input with the type value set to date to acheive this.

This is what an input with type date looks like:

Type Datetime-local

This works like the input type date, but it also lets the user pick a date with a particular time.

The input type of week lets a user select a specific week.

The input with the type of month populates months for the user to pick from when clicked.

There are times when a user will need to fill in multiple lines of text which wouldn't be suitable in an input type of text (as it specifies a one-line text field).

textarea lets the user do this as it defines multiple lines of text input. It takes its own attributes such as cols – for the number of columns, and rows for the number of rows.

Multiple Select Box

This is like a radio button and checkbox in one package. It is embedded in the page with two elements – a select element and an option , which is always nested inside select .

By default, the user can only pick one of the options. But with multiple attributes, you can let the user select more than one of the options.

How to Label HTML Inputs

Assigning labels to form controls is important. When they're properly connected to the input field through their for attribute and the input’s id attribute, it's easier for the user to use as they can just click the label itself to access the input.

How HTML Forms Work

When a user fills in a form and submits it with the submit button, the data in the form controls are sent to the server through GET or POST HTTP request methods.

So how is the server indicated? The form element takes an action attribute, which must have its value specified to the URL of the server. It also takes a method attribute, where the HTTP method it uses to convey the values to the server is specified.

This method could be GET or POST . With the GET method, the values entered by the user are visible in the URL when the data is submitted. But with POST , the values are sent in HTTP headers, so those values are not visible in the URL.

If a method attribute is not used in the form, it is automatically assumed that the user wants to use the GET method, because it’s the default.

So when should you use the GET or POST method? Use the GET method for submitting non-sensitive data or retrieving data from a server (for example, during searches). Use the POST request when submitting files or sensitive data.

Mini Project: Build a Basic Contact Form

Let’s take what we’ve learned about forms and use it to make a simple contact form. I will also introduce a few new concepts as we go to round it all out.

Here's the HTML:

What’s going on in this html code.

First, a form element is wrapping every other element. It has an action set to “example-server.com”, a dummy server where the form data will be received.

After the form element, every other element is also surrounded by a fieldset element with a legend tag right under it.

We use the fieldset element to group related inputs together, and the legend tag contains a caption conveying what the form is about.

The inputs name , email , and textarea are all in a div with a class of form-control. So they behave like a block element, in order to make styling easier with CSS.

They are also validated with the required attribute, so the form fails to submit when those fields are empty or when the user fails to type in the values in the appropriate format.

How ugly is that? We need to apply some styling!

Here's the CSS:

What’s the css code doing here.

We center everything in the body horizontally with Flexbox, and vertically with a 100% viewport height. We used a font-family of cursive.

We gave the inputs and textarea a width of 100% so they go all the way across. The labels got a minimal line-height of 1.9rem (30.4px), so they don’t stay too close to their respective inputs.

We specifically styled the button (input type button) with the transform property to push it to the center as it was off center a bit. We gave it a padding of 3px for more spacing around it. We then selected a cursive font-family for it with a weight of bold.

Because the button was too close to the textarea , we set a margin-top of 0.6rem to push it down a little bit.

We gave our fieldset element a padding of 20px at the top and bottom, with 40px at the left and right to push apart the border it creates around the form elements it is wrapped in.

I hope this tutorial has helped you understand how forms work. Now you should have the knowledge you need to integrate forms into your websites so you can start collecting data.

Thank you for reading, and keep coding.

I'm a software developer and tech writer focusing on frontend technologies

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

HTML Tutorial

Html graphics, html examples, html references, html form elements.

This chapter describes all the different HTML form elements.

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

The <input> Element

One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

All the different values of the type attribute are covered in the next chapter: HTML Input Types .

The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The <select> Element

The <select> element defines a drop-down list:

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Visible Values:

Use the size attribute to specify the number of visible values:

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

You can also define the size of the text area by using CSS:

Advertisement

The <button> Element

The <button> element defines a clickable button:

Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

The <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

Perform a calculation and show the result in an <output> element:

HTML Exercises

Test yourself with exercises.

In the form below, add an empty drop down list with the name "cars".

Start the Exercise

For a complete list of all available HTML tags, visit our HTML Tag Reference .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Hurry Up! And Get Flat 10% Discount On Your First Order                                    We are available by 24/7 for your support!

RealCode 4 You

+91 82 67 81 38 69

[email protected]

• realcode4you
• Feb 10, 2022

HTML Assignment Help | Useful HTML Form Design Sample

In this blog we will provide the some basic to advance html form design sample which can help you to design html form for your project task.

Admin Login Page

Code to create above form:(adminlogin.html)

adminHomePage.html

updateAdmin.html

changePassword.html

feedbackResult.html

staffList.html

staffRegister.html

deptList.html

deptAdd.html

Realcode4you expert team has a deep knowledge in HTML related topics. If you face any issue in html project assignment to deign the html web pages then our expert provide full support to complete your project.

Only you need to send your requirement details at:

Our expert covers all other part which help to design html page like; javascript, ajax, css. Hire us and get instant help with an affordable price,

Recent Posts

How to add color Effects Using JavaScript and HTML in Images

Final Year Project Help | Creating Web Application Using PHP, JavaScript and HTML

Build an Internal Website for Settling Reimbursement Claims Using ASP.NET | ASP .NET Assignment Help

• HTML Tutorial
• HTML Exercises
• HTML Attributes
• Global Attributes
• Event Attributes
• HTML Interview Questions
• DOM Audio/Video
• HTML Examples
• Color Picker
• A to Z Guide
• HTML Formatter

HTML Exercises, Practice Questions and Solutions

Are you eager to learn HTML or looking to brush up on your skills? Dive into our HTML Exercises , designed to cater to both beginners and experienced developers. With our interactive portal, you can engage in hands-on coding challenges, track your progress, and elevate your web development expertise. Whether you’re starting from scratch or aiming to refine your HTML knowledge, our practice questions and solutions offer a step-by-step guide to success.

A step-by-step HTML practice guide for beginner to advanced level.

Benefits of HTML Exercises

• Interactive Quizzes: Engage in hands-on HTML quizzes.
• Progress Tracking: Monitor your learning journey.
• Skill Enhancement: Sharpen coding skills effectively.
• Flexible Learning: Practice at your own pace.
• Immediate Feedback: Receive instant results and feedback.
• Convenient Accessibility: Accessible online, anytime.
• Real-world Application: Apply HTML concepts practically.
• Comprehensive Learning: Cover a range of HTML topics.

How to Start Practice ?:

Embark on your HTML learning journey by accessing our online practice portal. Choose exercises suited to your skill level, dive into coding challenges, and receive immediate feedback to reinforce your understanding. Our user-friendly platform makes learning HTML engaging and personalized, allowing you to develop your skills effectively.

HTML Best Practice Guide:

Dive into HTML excellence with our comprehensive Best Practice Guide. Uncover essential coding standards, optimization tips, and industry-recommended approaches to HTML development. Elevate your skills with insightful advice, practical examples, and interactive challenges. Ensure your web projects stand out for their clarity and performance by following these proven best practices.

Why Practice HTML Online?

• Hands-On Learning : Immerse yourself in interactive HTML exercises to gain practical experience.
• Progress Tracking : Monitor your learning journey and see how your skills improve over time.
• Flexible Practice : Learn at your own pace, anytime and anywhere with convenient online accessibility.
• Real-World Application : Apply HTML concepts to real projects, enhancing your ability to create websites.
• Comprehensive Coverage : Explore a variety of HTML topics, from basic syntax to advanced techniques.

HTML Online Practice Rules:

• Be Honest : Complete exercises independently, avoiding plagiarism or unauthorized help.
• Time Management : Adhere to time limits to simulate real-world scenarios effectively.
• Code Quality : Prioritize clean, efficient, and well-structured HTML code.
• Follow Guidelines : Adhere to platform instructions for input/output formats and code submission.
• No Cheating : Refrain from using external resources during assessments, unless explicitly permitted.
• Utilize Feedback : Learn from automated feedback and engage with the community for support.
• Active Participation : Join forums, discussions, and share insights with fellow learners to enhance your understanding.
• Continuous Improvement : Identify and address areas of weakness for ongoing growth and development.

Features of Practice Portal:

• Immediate Feedback : Receive instant feedback on mistakes to facilitate quick learning.
• Unlimited Attempts : Practice exercises multiple times to master HTML concepts.
• Time Management Tools : Display elapsed time for each set of exercises to help manage time effectively.
• Performance Analytics : Track your progress with detailed analytics, highlighting strengths and areas for improvement.
• Interactive Code Editor : Experience an immersive coding environment for hands-on practice.
• Hints and Solutions : Access hints and solutions to guide your learning process.
• Community Integration : Engage with peers through forums and discussions for collaborative learning.
• Adaptive Difficulty : Adjust exercise difficulty based on user performance for personalized challenges.
• Gamification Elements : Earn scores, achievements, or badges to make learning HTML engaging and fun.

Please Login to comment...

Similar reads.

• Web Technologies
• WebTech - Exercises
• Best Twitch Extensions for 2024: Top Tools for Viewers and Streamers
• Discord Emojis List 2024: Copy and Paste
• Best Adblockers for Twitch TV: Enjoy Ad-Free Streaming in 2024
• PS4 vs. PS5: Which PlayStation Should You Buy in 2024?
• 15 Most Important Aptitude Topics For Placements [2024]

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Information

• Author Services

Initiatives

You are accessing a machine-readable page. In order to be human-readable, please install an RSS reader.

All articles published by MDPI are made immediately available worldwide under an open access license. No special permission is required to reuse all or part of the article published by MDPI, including figures and tables. For articles published under an open access Creative Common CC BY license, any part of the article may be reused without permission provided that the original article is clearly cited. For more information, please refer to https://www.mdpi.com/openaccess .

Feature papers represent the most advanced research with significant potential for high impact in the field. A Feature Paper should be a substantial original Article that involves several techniques or approaches, provides an outlook for future research directions and describes possible research applications.

Feature papers are submitted upon individual invitation or recommendation by the scientific editors and must receive positive feedback from the reviewers.

Editor’s Choice articles are based on recommendations by the scientific editors of MDPI journals from around the world. Editors select a small number of articles recently published in the journal that they believe will be particularly interesting to readers, or important in the respective research area. The aim is to provide a snapshot of some of the most exciting work published in the various research areas of the journal.

Original Submission Date Received: .

• Active Journals
• Find a Journal
• Proceedings Series
• For Authors
• For Reviewers
• For Editors
• For Librarians
• For Publishers
• For Societies
• For Conference Organizers
• Open Access Policy
• Institutional Open Access Program
• Special Issues Guidelines
• Editorial Process
• Research and Publication Ethics
• Article Processing Charges
• Testimonials
• Preprints.org
• SciProfiles
• Encyclopedia

Article Menu

• Subscribe SciFeed
• Recommended Articles
• Author Biographies
• Google Scholar
• on Google Scholar
• Table of Contents

Find support for a specific problem in the support section of our website.

Please let us know what you think of our products and services.

Visit our dedicated information section to learn more about MDPI.

JSmol Viewer

Trajectory tracking via interconnection and damping assignment passivity-based control for a permanent magnet synchronous motor.

1. Introduction

2. pmsm model.

• The variables i d , i q and ω are available for measurement.
• The parameters R S , L S , n p , K m and J are known.

3. Controller Design

3.1. ida-pbc methodology, 3.2. tracking via ida-pbc, trajectory tracking strategy.

• The equilibrium x * = 0 is assignable to the error system of ( 3 ).
• There exists a structure ( 15 ) that satisfies the PDE.

3.3. Controller Design and Stability Analysis

3.4. trajectory tracking of speed, position, and torque, 4. simulation and experimental results, 4.1. simulation results, 4.1.1. speed trajectory tracking, 4.1.2. position trajectory tracking, 4.1.3. torque trajectory tracking, 4.2. experimental results, 5. conclusions, author contributions, institutional review board statement, informed consent statement, data availability statement, conflicts of interest.

• Bose, B. Modern Power Electronics and AC Drives, Eastern Economy Ed. ; Prentice Hall PTR: Hoboken, NJ, USA, 2002. [ Google Scholar ]
• Naouar, M.W.; Naassani, A.; Monmasson, E.; Slama-Belkhodja, I. FPGA-Based Speed Control of Synchronous Machine using a P-PI Controller. In Proceedings of the 2006 IEEE International Symposium on Industrial Electronics, Montreal, QC, Canada, 9–13 July 2006; Volume 2, pp. 1527–1532. [ Google Scholar ] [ CrossRef ]
• Li, W.; Lin, W.; Liu, P.X. Speed Tracking Control Based on Backstepping of Permanent Magnet Synchronous Motor with Uncertainty. In Proceedings of the 2007 International Conference on Mechatronics and Automation, Harbin, China, 5–8 August 2007; pp. 3657–3661. [ Google Scholar ] [ CrossRef ]
• Solsona, J.; Valla, M.I.; Muravchik, C. Nonlinear control of a permanent magnet synchronous motor with disturbance torque estimation. IEEE Trans. Energy Convers. 2000 , 15 , 163–168. [ Google Scholar ] [ CrossRef ] [ PubMed ]
• Rasmussen, H.; Vadstrup, P.; Borsting, H. Sensorless field oriented control of a PM motor including zero speed. In Proceedings of the IEEE International Electric Machines and Drives Conference, 2003. IEMDC’03, Madison, WI, USA, 1–4 June 2003; Volume 2, pp. 1224–1228. [ Google Scholar ] [ CrossRef ]
• Wang, Y.; Zhu, J.G.; Guo, Y.G. A survey of direct torque control schemes for permanent magnet synchronous motor drives. In Proceedings of the 2007 Australasian Universities Power Engineering Conference, Perth, WA, Australia, 9–12 December 2007; pp. 1–5. [ Google Scholar ] [ CrossRef ]
• Khanchoul, M.; Hilairet, M.; Normand-Cyrot, D. A passivity-based controller under low sampling for speed control of PMSM. Control Eng. Pract. 2014 , 26 , 20–27. [ Google Scholar ] [ CrossRef ]
• Peng, J.; Yao, M. Overview of predictive control technology for permanent magnet synchronous motor systems. Appl. Sci. 2023 , 13 , 6255. [ Google Scholar ] [ CrossRef ]
• Zhang, Q.; Zhang, C. Speed Control of PMSM Based on Fuzzy Active Disturbance Rejection Control under Small Disturbances. Appl. Sci. 2023 , 13 , 10775. [ Google Scholar ] [ CrossRef ]
• Chen, L.; Zhang, H.; Wang, H.; Shao, K.; Wang, G.; Yazdani, A. Continuous adaptive fast terminal sliding mode-based speed regulation control of pmsm drive via improved super-twisting observer. IEEE Trans. Ind. Electron. 2023 , 71 , 5105–5115. [ Google Scholar ] [ CrossRef ]
• Belkhier, Y.; Achour, A.; Bures, M.; Ullah, N.; Bajaj, M.; Zawbaa, H.M.; Kamel, S. Interconnection and damping assignment passivity-based non-linear observer control for efficiency maximization of permanent magnet synchronous motor. Energy Rep. 2022 , 8 , 1350–1361. [ Google Scholar ] [ CrossRef ]
• Belkhier, Y.; Shaw, R.N.; Bures, M.; Islam, M.R.; Bajaj, M.; Albalawi, F.; Alqurashi, A.; Ghoneim, S.S. Robust interconnection and damping assignment energy-based control for a permanent magnet synchronous motor using high order sliding mode approach and nonlinear observer. Energy Rep. 2022 , 8 , 1731–1740. [ Google Scholar ] [ CrossRef ]
• Ortega, R.; Spong, M.W. Adaptive motion control of rigid robots: A tutorial. In Proceedings of the 27th IEEE Conference on Decision and Control, Austin, TX, USA, 7–9 December 1988; Volume 2, pp. 1575–1584. [ Google Scholar ] [ CrossRef ]
• Ortega, R.; Liu, Z.; Su, H. Control via interconnection and damping assignment of linear time-invariant systems: A tutorial. Int. J. Control 2012 , 85 , 603–611. [ Google Scholar ] [ CrossRef ]
• Ortega, R.; van der Schaft, A.; Maschke, B.; Escobar, G. Interconnection and damping assignment passivity-based control of port-controlled Hamiltonian systems. Automatica 2002 , 38 , 585–596. [ Google Scholar ] [ CrossRef ]
• Gomez-Estern, F.; der Schaft, A.V. Physical Damping in IDA-PBC Controlled Underactuated Mechanical Systems. Eur. J. Control 2004 , 10 , 451–468. [ Google Scholar ] [ CrossRef ]
• Chang, D.E. Generalization of the IDA-PBC method for stabilization of mechanical systems. In Proceedings of the 18th Mediterranean Conference on Control and Automation, MED’10, Marrakech, Morocco, 23–25 June 2010; pp. 226–230. [ Google Scholar ]
• Rodriguez, H.; Ortega, R.; Escobar, G. A robustly stable output feedback saturated controller for the Boost DC-to-DC converter. In Proceedings of the 38th IEEE Conference on Decision and Control (Cat. No.99CH36304), Phoenix, AZ, USA, 7–10 December 1999; Volume 3, pp. 2100–2105. [ Google Scholar ]
• Galaz, M.; Ortega, R.; Bazanella, A.S.; Stankovic, A.M. An energy-shaping approach to the design of excitation control of synchronous generators. Automatica 2003 , 39 , 111–119. [ Google Scholar ] [ CrossRef ]
• Batlle, C.; Doria-Cerezo, A.; Ortega, R. Power flow control of a doubly-fed induction machine coupled to a flywheel. In Proceedings of the 2004 IEEE International Conference on Control Applications, Taipei, Taiwan, 2–4 September 2004; Volume 2, pp. 1645–1650. [ Google Scholar ]
• Petrovic, V.; Ortega, R.; Stankovic, A.M. Interconnection and damping assignment approach to control of PM synchronous motors. IEEE Trans. Control Syst. Technol. 2001 , 9 , 811–820. [ Google Scholar ] [ CrossRef ]
• Ortega, R.; Garcia-Canseco, E. Interconnection and Damping Assignment Passivity-Based Control: A Survey. Eur. J. Control 2004 , 10 , 432–450. [ Google Scholar ] [ CrossRef ]
• Fujimoto, K.; Sakurama, K.; Sugie, T. Trajectory tracking control of port-controlled Hamiltonian systems via generalized canonical transformations. Automatica 2003 , 39 , 2059–2069. [ Google Scholar ] [ CrossRef ]
• Fujimoto, K.; Sugie, T. Canonical transformation and stabilization of generalized Hamiltonian systems. Syst. Control Lett. 2001 , 42 , 217–227. [ Google Scholar ] [ CrossRef ]
• Borja-Rosales, P. Passivity-Based Control Using Coordinates Change. Master’s Thesis, Universidad Nacional Autonoma de Mexico, Mexico, 2013. (In Spanish). [ Google Scholar ]
• Chiasson, J. Modeling and High Performance Control of Electric Machines ; IEEE Press Series on Power Engineering; Wiley: Hoboken, NJ, USA, 2005. [ Google Scholar ]
• Mujica, H.; Espinosa-Pérez, G. Nonlinear Passivity-Based Control of Induction Motors for High Dynamic Performance. Rev. Iberoam. Autom. Inform. Ind. 2014 , 11 , 32–43. [ Google Scholar ] [ CrossRef ]

Click here to enlarge figure

Share and Cite

Martinez-Padron, D.S.; de la Rosa-Mendoza, S.J.; Alvarez-Salas, R.; Espinosa-Perez, G.; Gonzalez-Garcia, M.A. Trajectory Tracking via Interconnection and Damping Assignment Passivity-Based Control for a Permanent Magnet Synchronous Motor. Appl. Sci. 2024 , 14 , 7977. https://doi.org/10.3390/app14177977

Martinez-Padron DS, de la Rosa-Mendoza SJ, Alvarez-Salas R, Espinosa-Perez G, Gonzalez-Garcia MA. Trajectory Tracking via Interconnection and Damping Assignment Passivity-Based Control for a Permanent Magnet Synchronous Motor. Applied Sciences . 2024; 14(17):7977. https://doi.org/10.3390/app14177977

Martinez-Padron, Daniel Sting, San Jose de la Rosa-Mendoza, Ricardo Alvarez-Salas, Gerardo Espinosa-Perez, and Mario Arturo Gonzalez-Garcia. 2024. "Trajectory Tracking via Interconnection and Damping Assignment Passivity-Based Control for a Permanent Magnet Synchronous Motor" Applied Sciences 14, no. 17: 7977. https://doi.org/10.3390/app14177977

Article Metrics

Article access statistics, further information, mdpi initiatives, follow mdpi.

Subscribe to receive issue release notifications and newsletters from MDPI journals