HTML text box reference styles and common operating techniques

May 03, 2021 12:37 HTML

Table of contents

In web design, often use html text boxes to collect some user information or make landing pages, although it is only a simple input box, but if adding some beautification design will make your page look more attractive, here are some html text boxes to provide reference styles and common html operation techniques, hoping to help your web page production. First let's look at how one of the simplest text boxes works.


Example of the W3Cschool text input box:


As the example above shows, this html text box style is very simple and uses the pseudo-element focus of css. L et's do it all over again. First we need to add a text box code to your page as follows:

W3Cschool文本输入框实例:<input type="text" value="请输入文本" >

Try it out . . .

This is our most common button, it doesn't have any style. Now let's add some nice styles, the code is as follows:

.mytxt {



font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;





















text-shadow:0px 1px 2px #fff;























When we add a style, we need to reference it in the text box. Modify the text box code as follows:

<input type="text" value="" class="mytxt" />

Try it out . . .

Okay, our basic text box style is done, and now we need to add the focus button again. Let's start with a brief introduction to what the focus button does: it triggers this style when our arrows are in the text box.

Add the css style as follows:

.mytxt:focus {

border: 1px solid #fafafa;

-webkit-box-shadow: 0px 0px 6px #007eff;

-moz-box-shadow: 0px 0px 5px #007eff;

box-shadow: 0px 0px 5px #007eff;


Try it out . . .

Because when we move the mouse in, we need to modify the color of the border and some shadows, so the code above is enough! I hope you can take inspiration from the above example.

Now let's take a look at how a few useful html form text boxes work. T he text box of the form is divided into a single-line text box and a multi-line text box, so the name implies that a single-line text box is used to enter some short information, such as name, E_mail address, password, etc.; A s long as you understand the meaning of the text box parameters of the form, it is not difficult to make a text box that receives information, see the following example.

An example of a one-line text box

HTML text box reference styles and common operating techniques

The source code for this example is as follows:

<p>您的姓名: <input type="text" name="text1" size="12" maxlength="20">

您的E_mail: <input type="text" name="text2" size="20" maxlength="24" value="*****@*.*">

输入口令: <input type="password" name="text3" size="8" maxlength="8"> </p>

<p align="center">

<input type="submit" name="提交" value="提 交">

<input type="reset" name="重写" value="重 写">

Try it out . . .

In this example, three single-line text boxes are used to receive the user's name, E_mail address, and password information, setting the width of the text box (size) and maximum input text length (maxlength) in each of the three text boxes, and setting an initial value in the second text box, and you may notice that I have taken the name of each text box (name) as the English name, which is convenient for use in the following example. If receiving form information by e-mail is not processed by a program, it is Chinese with an e-mail name.

To make it a form with actual interaction, add a submit button and set the action parameter in the tag: action:"mailto:[email protected] .com" and set the method parameter to: method-"post" so that once the Submit button is pressed, the information is emailed to the @qq .com 3400982550 mailbox. I t doesn't seem hard to make! I s it? N ote, however, that when the value of size is less than the value of maxlength, it scrolls automatically when the content exceeds the length of the input window;

HTML text box reference styles and common operating techniques

Second, check the information entered by the user

In the example above, if the user presses the submit button without writing anything, isn't that a white message? T o avoid this, the user's input information needs to be tested, which requires the onclick parameter of the tag, which we set to: onclick" and "form1", and "test" is a Javascript sub-program that tests the input of the text box in the "Submit" button. Its source code is as follows:

<script language="javascript">


function test(form){




function test1(form){

if (form.text1.value=="")



function test2(form){

if (form.text2.value==""||form.text2.value.indexOf('@',0)==-1)



function test3(form){

if (form.text3.value!="12345678")





Copy this program between the slt; head and the slt;/head;gt; once the user presses the submit button, the program is called to verify the information entered by the user, and if the information is incorrect, a prompt is given to remind the user to enter the correct information. Note: The same effect can be achieved by setting the onsubmit "test" in the tag.

Third, make a guestbook

HTML text box reference styles and common operating techniques

This guestbook is simple, but it already contains the basic functionality of the guestbook, which is to receive information from users by mail without CGI support. I ts production is also relatively simple, it uses the table to produce a three-dimensional effect, insert a table in the form, and set the table's relevant parameters, in terms of the form, just a scale of one more line of text box. Y ou can't get a multi-line text box by setting type"textarea" in the tag. L et's set a multi-line text box with another TAG of HTML, and if the default text box size doesn't fit, we can resize the window by setting the cols and rows parameters. T he settings for other tag parameters are the same example. The source code after the completion of this example is as follows:

<table width="50%" border="1" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#CCFFCC" cellpadding="4" align="left">

<tr><td colspan="2"> <div align="center"><b>留 言 簿</b></div> </td></tr>

<tr><td>姓名: <input type="text" name="textfield" size="8"> </td>

<td>E_mail: <input type="text" name="textfield2" size="10" maxlength="20"> </td>


<tr><td colspan="2"> <div align="center">留 言<br> <textarea name="textfield3" cols="30" rows="3"></textarea></div></td></tr>

<tr><td> <div align="right"> <input type="submit" name="Submit" value="提 交"> </div> </td>

<td> <input type="reset" name="Submit2" value="重 写"> </td></tr></table>

Try it out . . .

html Text box reference style

The background of the input frame is transparent:

<input style="background:transparent;border:1px solid #ffffff">

Try it out . . .

Mouse across the input box, input box background color change:

<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="'black';'plum'"

style="width: 106; height: 21"

onmouseout="'black';'#ffffff'" style="border-width:1px;border-color=black">

Try it out . . .

The input box border flashes when you enter a word (the border is small):

<Script Language="JavaScript">

function borderColor(){


self['oText'].style.borderColor = 'yellow';


self['oText'].style.borderColor = 'red';


oTime = setTimeout('borderColor()',400);



<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

Try it out . . .
The input box flashes when you enter a word (the border is dashed):


#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){"#ff0000";clearTimeout(timer)})};


<input type="text" id="oText">

Try it out . . .

Input box for automatic horizontal adversity:

<input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk">

Try it out . . .

Text boxes that automatically extend down:

<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80)">输入几个回车试试</textarea>

Try it out . . .

Only underlined text boxes:

<input style="border:0;border-bottom:1px solid black;background:;">

Try it out . . .

Software serial number input box:

<script for="T" event="onkeyup">



<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">

Try it out . . .

Software serial number type input box (full version):

<script for="Submit" event="onclick">

var sn=new Array();





<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">

<input type="submit" name="Submit">

Try it out . . .

Html Common tricks for text boxes

1, html How the text box can be rounded with css

The border-radius property enables the fillet of an element. T he following css enables rounded corners of text boxes (one-line, multi-line):
input[type=text],textarea{border-radius:3px; b order:1px solid #000; }

Border-radius is used as follows:
The border-radius property is a short-case property that sets four border--radius properties.
This property allows you to add fillet borders to elements

border-radius: 1-4 length|% / 1-4 length|%;

Set four values for each radius in this order.
If bottom-left is omitted, it is the same as top-right.
If bottom-right is omitted, it is the same as top-left.
If top-right is omitted, it is the same as top-left.
Units generally use px and a higher percentage, other units can also be

HTML text box reference styles and common operating techniques

2. How to set the size of the text box in HTML

The size of the border can be controlled using CSS styles, such as:
<textarea id="txtCon" >content</textarea>
<style type="text/css">
#txtCon{width:100px; h eight:20px; }

You can also use the text box's own properties to define the size of the text box's rows and columns, such as:
<textarea id="txtCon" rows="100" cols="100" >content</textarea>

3, in html how to implement the value of this web page Chinese this box to another page username password box, and achieve login

In html pages, a button, two text boxes, how do you write code in the html to pass the values from those two text boxes to the username and password in another addressed page and log in?

The page must jump past. F or example, another page is page.html then when you jump the page.html?username=tony&password=123 jumps to this address,

Then write in the script when you go to another page
<SCRIPT language=JavaScript>
var url = window.location.href;
Then var username s url.split ("?") . split ("""""
var password = url.split("&")[1].split("=")[1];

Then assign the value to your password text box
document.getElementById("txtpassword").value = password;

Then verify the username and password.

HTML text box reference styles and common operating techniques

4, HTML let the form input and other text boxes as read-only non-editable methods

Sometimes, we want the text box in the form to be read-only, so that the user can't modify the information in it, such as making the contents of the word "china" unable to be modified. H ere are a few ways to implement it.

Method 1: onfocus-this.blur() leaves the focus when the mouse is not on
the input type is "text" name," "input1" value, "China," onfocus, this.blur()

Method 2: readonly
"text" name"input1" value="China" readonly
the input type is "text" name," "input1" value, "China," readonly, "true," "true";

Method 3: Disabled
"text" name "input1" value "China" disabled "true"

Complete example:

<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />

"true" This fruit text turns gray and cannot be edited.
ReadOnly"true" text does not change color and is not editable

css mask input: slt; input style s"ime-mode: disabled"

There are two ways first: the input element that is disabled after the definition of "disabled" is neither available nor clickable. S econd: readonly"readonly" read-only fields cannot be modified. H owever, users can still use the tab key to switch to the field, and they can select or copy their text;

5, you can also create a text box for you to preset a value you want to display, the specific set-up method you can refer to this site's programming test!