May 03, 2021 HTML
1. An example of a one-line text box
2. Second, check the information entered by the user
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:
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 {
color:#333;
line-height:normal;
font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;
font-style:normal;
font-variant:normal;
font-size-adjust:none;
font-stretch:normal;
font-weight:normal;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:4px;
padding-right:4px;
padding-bottom:4px;
padding-left:4px;
font-size:15px;
outline-width:medium;
outline-style:none;
outline-color:invert;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
text-shadow:0px 1px 2px #fff;
background-attachment:scroll;
background-repeat:repeat-x;
background-position-x:left;
background-position-y:top;
background-size:auto;
background-origin:padding-box;
background-clip:border-box;
background-color:rgb(255,255,255);
margin-right:8px;
border-top-color:#ccc;
border-right-color:#ccc;
border-bottom-color:#ccc;
border-left-color:#ccc;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
}
When we add a style, we need to reference it in the text box.
Modify the text box code as follows:
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;
}
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.
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="重 写">
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:3400982550@qq .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;
<script language="javascript">
<!--
function test(form){
test1(form);
test2(form);
test3(form)}
function test1(form){
if (form.text1.value=="")
Alert ("You didn't write your name, please enter your name!")
}
function test2(form){
if (form.text2.value==""||form.text2.value.indexOf('@',0)==-1)
Alert ("E_MAIL address is incorrect, please re-enter!")
}
function test3(form){
if (form.text3.value!="12345678")
Alert ("Password error, please re-enter!")
}
-->
</script>
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>
<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>
The background of the input frame is transparent:
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
The input box border flashes when you enter a word (the border is small):
<Script Language="JavaScript">
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">
<style>
#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(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
Input box for automatic horizontal adversity:
Text boxes that automatically extend down:
Only underlined text boxes:
Software serial number input box:
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<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">
Software serial number type input box (full version):
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<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">
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
Grammar:
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
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; }
</style>
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;
document.getElementById("txtusername").value=username;
< /SCRIPT>
Then verify the username and password.
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!