HTML simple web form creation example introduction

HTML simple web form creation example introduction
<input> is used to collect user information and has no closing statement.
<type>input element type,
The type attribute of input, type attribute value:

text (text box), button (button), checkbox (check box), file (file), hidden (hidden field),

image (image), password (password box), radio (radio button), reset (reset button), submit (submit button).

<textarea> defines a text area, ending </textarea>.textarea attributes:

example:

Copy code
The code is as follows:

<textarea rows="3" cols="30">
text...
</textarea>

<b>Bold, ending</b>

<i>Italics, closing remarks</i>

<u>Underline, closing remarks</u>

Large fonts

<small>Small font</small>

<blink>Blinking effect</blink>

<em>Usually italic, emphasized</em>

<strong>Generally bold, emphasized</strong>

<cite> is usually in italics and is used for citations and examples.</cite>

Copy code
The code is as follows:

<html>
<head>
<title>Welcome to register/login</title>
</head>
<form name="form1" method="post" action="">
<P>Name:
<input type="text" value="小神" size="20">
</P>
</form>
<form name="form2" method="post" action="">
<P>Password:
<input value="123456" type="password" size="22">
</P>
</form>
<form name="form3" method="post" action="">
Single gender:
<input name="gen" type="radio" class="input" value="男" checked>
<img src="b.gif" width="23" height="21">Male&nbsp;
<input name="gen" type="radio" class="input" value="女" >
<img src="g.gif" width="23" height="21">Female&nbsp;
Select hobbies:
<label>
<input type="checkbox" name=""value=""checked>
</label>Chat&nbsp;&nbsp;
<label>
<input type="checkbox" name="" value="">
</label>Movies&nbsp;&nbsp;
<label>
<input type="checkbox" name="" value="">
</label>Games&nbsp;&nbsp;
Date of Birth:
<input name="byear" value="yyyy" size=4 maxlength=4 >Year&nbsp;
<select name="bmon">
<option value=" " selected>[Select month] </option>
<option value=0>January</option>
<option value=1>February</option>
<option value=2>March</option>
<option value=3>April</option>
</select>Month&nbsp;
<input name="bday" value="dd" size=2 maxlength=2 >Day&nbsp;
<div class="left">
<span class="spanTxt">Enter the number in the right picture to verify</span>:
<span class="shortInputSpan"><input type="text" class="short_input" name="validatecode" id="validatecode" maxlength="4" onFocus="textshow(this,'Please enter the verification code correctly');"/></span>
<span class="h1">
<img id="vcode" name="vcode" alt="" src="help_alarm.jpg" height="28" width="63" align="absmiddle"/><a href="javascript:changeimg();" class="code_style">Can't see clearly, change one</a>
</span>
</div>
</form>
<form>
<input type="checkbox" id="chkagreement" name="chkagreement" checked="checked"/>
Accept <a href="小神幻化成.html" target="_blank" >《XXX Registration Agreement》</a>
</form>
<form name="form7" method="post" action="">
<textarea name="textarea" cols="35" rows="6">Welcome to read this Terms of Service Agreement. The terms and conditions set forth in this agreement apply to your use of XXX's services.
This service agreement is for me, you, and him.
This service agreement has contractual effect.
my rights and obligations
</textarea>
</form>
</html>

<<:  Web front-end development experience summary

>>:  Implementation of the list-style-type attribute in front of CSS ordered or unordered lists

Recommend

Some understanding of absolute and relative positioning of page elements

From today on, I will regularly organize some smal...

Detailed configuration of mysql8.x docker remote access

Table of contents Environmental conditions Errors...

Mini Program Development to Implement Unified Management of Access_Token

Table of contents TOKEN Timer Refresher 2. Intern...

Nginx reverse proxy to go-fastdfs case explanation

background go-fastdfs is a distributed file syste...

The perfect solution for highlighting keywords in HTML

I recently encountered a feature while working on...

Detailed explanation of the four transaction isolation levels in MySQL

The test environment of this experiment: Windows ...

A detailed discussion of components in Vue

Table of contents 1. Component Registration 2. Us...

React diff algorithm source code analysis

Table of contents Single Node Diff reconcileSingl...

Vue handwriting loading animation project

When the page is not responding, displaying the l...

MySQL should never write update statements like this

Table of contents Preface cause Phenomenon why? A...

How to build your own Angular component library with DevUI

Table of contents Preface Creating a component li...

MySQL5.7.27-winx64 version win10 download and installation tutorial diagram

MySQL 5.7 installation We are learning MySQL data...

Detailed explanation of Docker's most commonly used image commands and container commands

This article lists the most commonly used image c...

How to use docker to deploy Django technology stack project

With the popularity and maturity of Docker, it ha...

A Deep Dive into JavaScript Promises

Table of contents 1. What is Promise? 2. Why is t...