Today, the teacher assigned an assignment in class - the static page of century Jiayuan registration, which was written with basic html and css knowledge. So I typed it out according to the page given by the teacher. The basic code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprehensive case-Registration page</title>
<style>
.pink {
color: pink;
}
</style>
</head>
<body>
<h4 class="pink" align="center">Youth doesn't often exist. Hurry up and fall in love</h4>
<table width="500" align="center">
<!-- first line -->
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"><img src="images/man.jpg"> male</label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg"> female</label>
</td>
</tr>
<!-- Second line -->
<tr>
<td>birthday:</td>
<td>
<select>
<option>--Please select a year--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--Please select a month--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--Please select a day--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- Third line -->
<tr>
<td>Location</td>
<td><input type="text" value="Hello, Beijing"></td>
</tr>
<!-- Fourth line -->
<tr>
<td>marital status</td>
<td>
<input type="radio" name="marry" id="marry"> <label for="marry"> unmarried</label>
<input type="radio" name="marry" id="marry"> <label for="marry"> married</label>
<input type="radio" name="marry" id="marry"> <label for="marry"> divorce</label>
</td>
</tr>
<!-- The fifth line -->
<tr>
<td>education:</td>
<td><input type="text" value="kindergarten"></td>
</tr>
<!-- a monthly salary -->
<tr>
<td>a monthly salary</td>
<td><input type="text" value="10000-20000"></td>
<!-- phone number -->
<tr>
<td>phone number</td>
<td><input type="text"></td>
</tr>
<!-- nickname -->
<tr>
<td>nickname</td>
<td><input type="text"></td>
</tr>
</tr>
<!-- Line 6 -->
<tr>
<td>Favorite type:</td>
<td>
<input type="checkbox" name="love"> Charming
<input type="checkbox" name="love"> lovely
<input type="checkbox" name="love"> little fresh meat
<input type="checkbox" name="love"> Old Bacon
<input type="checkbox" name="love" checked="checked"> I like all of them
</td>
</tr>
<!-- Line 7 -->
<tr>
<td>self-introduction</td>
<td>
<textarea>self-introduction</textarea>
</td>
</tr>
<!-- Line 8 -->
<tr>
<td></td>
<td>
<input value="Free registration" type="image" src="images/btn.png"/>
</td>
</tr>
<!-- Line 9 -->
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">I agree to the terms of registration and membership criteria
</td>
</tr>
<!-- Line 10 -->
<tr>
<td></td>
<td>
<a href="#"> I'm a member, log in now</a>
</td>
</tr>
<!-- Line 11 -->
<tr>
<td></td>
<td>
<h5>I promise</h5>
<ul>
<li>Over 18 years old, single</li>
<li>Take a serious attitude</li>
<li>Sincerely looking for the other half</li>
</ul>
</td>
</tr>
</table>
</body>
It's like this after running, which is basically the same as the teacher's
The problem is, what I don't understand is that the teacher said that the value of the name attribute of the radio button and the check button must be the same. If the radio button is different, multiple choices will be made, and then I demonstrated it in class. That's true. And I experimented after class. If the name value of the radio button is different, multiple choices can be made like the check button, but the check button doesn't If there is a value or the name value is the same, it can realize multiple selection, so the teacher didn't make it clear and said it too one-sided. The role of name value is certainly not like this, so I searched a lot of information on the Internet and found the secret: through learning, we know that the < input > form element is used to input user information, and the name and value attributes are used for background personnel. Speaking of this , I have to say that due to our limited knowledge, we need to use php, Java and JS knowledge in the background, and we haven't contacted the back end and server, so we don't know how the name attribute works. This is a problem that we may encounter in Xiaobai's learning front end. Bloggers have been troubled by this problem for many days. Today I put what I saw on the Internet and my I think the name attribute is the same as a person's name. It is used to distinguish a person. Therefore, the radio buttons or check buttons with the same name value belong to the same group, and the radio buttons or check buttons with different name values belong to different groups. In this way, the background can distinguish which group the user selects. Therefore, the radio buttons or check buttons of the same group The name value of the selected button must be the same, which really makes sense. However, most of the explanations on the Internet are stereotyped, very one-sided and not clear. I may not be right or clear, but it only represents my personal opinion, because bloggers have not learned the back-end knowledge. Perhaps these problems can be solved by learning the back-end knowledge Come on!
If a big man sees this article, he is welcome to correct it. I hope more friends will put forward mistakes to me.