form: A form
form defines a form that represents the data submitted together.
Attributes:
action: define the location of data submission (where the book is submitted)
method: the method of submission, divided into get/post. The difference between the two will be explained in Background Processing.
id: Define a unique ID value for the form.
name: Define a name for the form.
label label: used to assist the text input box, you can directly enter the text box when you click the label.
Attribute: for-->Fill in the id value of the specific text box. When you click this label, the mouse will jump to the text box corresponding to the ID.
input; text input box, which belongs to the inline-block tag.
By default, the input box will have a blue border effect when clicked.
Attributes:
type: Defines the category of the document box.
text (default): normal text box.
password: Password box, the input content is displayed in dots.
radio: radio button. Only one radio with the same name can be selected.
checkbox: checkbox. Only checkboxes with the same name are considered a group of information.
file: Upload a file. Style cannot be modified.
submit: Submit button. Modify the display text of the button by value.
reset: Reset button. Modify the display text of the button by value.
button: normal button. Modify the display text of the button by value.
width: Defines the width of the text box.
value: Fill in the default value of the text box.
placeholder: the placeholder prompt information of the text box, which is a new attribute of html5.
In radio and checkbox checked="checked" means that it has been selected by default.
Modify the placeholder style: When modifying the font color and size of the text box, the style of the placeholder cannot be modified, and the style of the placeholder
can only be modified for different browsers.
Google Chrome:
::-webkit-input-placeholder{
color:red;
}
Firefox:
::-moz-placeholder{
color:green;
}
IE (only available in IE10 and above):
:-ms -input-placeholder{
color: #9A32CD;
}
drop-down box: select-->The style is not easy to modify, and it will be implemented by js later.
Multi-line text input box: textarea
attribute:
cols-->Define the width of the text box, which can also be adjusted by the width of the style.
rows-->Define the height of the text box, which can also be adjusted by the height of the style.
Style:
outline:none--->No blue border effect when clicked.
resize:none--->You cannot resize at will.
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
<style>
/* Set the style of the placeholder prompt information of the Google Chrome text input box */
::-webkit-input-placeholder{
color:red;
}
/* Set Firefox browser placeholder style */
::-moz-placeholder{
color:green;
}
/* Set the IE browser placeholder style, only available in IE10 and above */
:-ms-input-placeholder{
color: #9A32CD;
}
input{
/*Remove the blue border effect when the text box is clicked*/
outline: none;
width: 200px;
/* Set the color of the text box text */
color:blue;
}
.sex,.ho{
width: 20px;
}
textarea{
outline: none;
/* Set the multi-line text box size to not be adjustable*/
resize: none;
}
</style>
</head>
<body>
<form action="" method="post" id="form1" name="myform">
<input type="text" placeholder="Please enter username" /><br>
<input type="password" /> <br>
<input type="radio" id="man" class="sex" checked="checked" name="gender" />
<label for="man">男</label>
<input type="radio" id="nv" class="sex" name="gender" />
<label for="nv">女</label><br>
<input type="checkbox" name="hobby" class="ho" />唱歌
<input type="checkbox" name="hobby" class="ho" />跳舞
<input type="checkbox" checked="checked" name="hobby" class="ho" />朗诵
<input type="checkbox" name="hobby" class="ho" />表演 <br>
<input type="file" /> <br>
<input type="submit" value="提交吧" />
<input type="reset" value="Refill" />
<input type="button" value="普通按钮" /><br>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select> <br>
<textarea cols="50" rows="10"></textarea>
</form>
</body>
</html>
The effect is as follows:
