JavaScript article will show you how to play with web forms

1. Introduction

Earlier we introduced the rapid development of web pages. This time we will talk about something more in-depth. Before reading this, it is recommended to read

Read the previous article and then read this one.

2. Main text

As shown in the figure: Click the small triangle on the webapp until you see the jsp location

After we create it, there will be an empty list of jsp here. The content we enter here will be fed back to the front end first, and then

Back-end data processing and reception.

Step 1: Let's enter some things here as shown in the figure: <h1>Content</h1> is the format, indicating that the content in the middle is

An h1-sized title. The sizes of h1-h6 titles are gradually decreasing. Be careful when using h1 because it is relatively large.

After clicking this run, we need to go to Baidu to search for localhost:8080 and see the effect

It feels quite large, so we usually use <h2>內容</h2>

Step 2: Enter the circled content below. <input type=""> is the format, and "txt" means there is a box behind it.

After clicking Run, go to Baidu and refresh the previous content to get the new content as shown in the figure:

But we feel that this does not look good in one line, so we just need to add a line break <br>

After clicking run, you can refresh it on Baidu and get it

Let's try typing this:

We found that the password can be seen without any encryption, so we just need to change txt to password

Click Run and refresh in Baidu to view:

The result is as shown below:

You can control whether it is visible through the small eye logo

Step 3: We just need to add name and id, where the colon represents something like an identifier.

The id is displayed in the front part, while the name is used when the back end transmits data.

We found that we couldn't submit after entering the account and password, so we need to set a button, as shown in the figure, to enter the underlined part

<input type=" "> is a format, submit is a submit button

But you will find that there is no response after clicking submit. At this time, we need to add <form></form> to wrap the whole

<form></form> is equivalent to a questionnaire. Once you have the questionnaire, you can submit it.

After clicking Run, you can see the following figure:

After clicking Submit, it will be displayed on the web page, and the role of name will be reflected.

Step 4: Since this is a rank submission, it is obviously necessary to select a rank, which should be <option>內容</option>

But what happens if you write <option>內容<option> with a shaky hand and miss the /?

There will be many more spaces, and these spaces are optional

This is very uncomfortable, so it is better to add / in the idea code, as shown in the figure:

Then click Run and refresh on Baidu.

You can also set different submit buttons, just need a value='' '' to set the content

As shown in the figure:

We can also set single choice and multiple choice, so how to achieve it?

Radio: The keyword for radio is "radio". We know that the format for setting a function is <input type=" "> .

So as shown in the figure:

turn out:

We found that all three can be selected, so we must add the name modifier and use the same direction to indicate that only one can be selected.

This time it's just as shown in the picture

If we want to add a default value to this, the one selected by default, we just need to add checked

after:

Multiple choice: The difference between multiple choice and single choice is that the radio is changed to checkbox

After running, as shown below:

That's it. If we are too close, sometimes we can't click on the box, and click on the Chinese characters but there is no response and we can't select them, so we can

You can also choose to add <label>內容</label> directly when setting it to Chinese characters, as shown in the figure

You can now select text:

Sometimes we make too many mistakes and don't want to delete them one by one. In this case, we can use a reset button.

Setting it again means resetting it. We change the last button to a submit button.

As shown in the figure:

Click Reset to clear everything.

I wrote a rough version last time.

There are others we will learn about later.

What you are looking for is here: ❤Three ways to overlook backend data reception❤ (recommended collection)

Also here: Direct access to large-scale web entry-level web rapid development (❤ Recommended collection ❤)

This is the end of this article about JavaScript to help you play with web form pages. For more relevant JavaScript web form content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!