form tag
The form tag is something we often see when we sign up on a website.
When signing up, we choose a job, date of birth, male, female, cell phone number, or address, etc. We are going o make it from now on! Let's start by creating a simple membership page that describes each tag and combines them. ^^
So let's get started.
<form name="Name of the form" action="Address to send value" method="post method or get method"> Various tags </form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
Various tags
</form>
</body>
</html>
This tag is done as above.
The name is the name of the form which you need to specify, because it will be used later by JavaScript.
value is the actual value of the information in the name.
Action is the page we will send the values we created, the name, age, and so on. This is part of php. Later, when you enter the php course, you will know what I am taking about.
For method, enter POST or GET. This part is also covered in the php course.
Text box
Use it for information that you need to type directly in short texts such as name, email, and address.
<input type="text" name="myname" value="" placeholder="Field Description" maxlength="max length" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
<input type="text" name="myname" value="" placeholder="이름을 입력하세요." maxlength="max length" />
</form>
</body>
</html>
The source looks like the above.
If you try to run it, it will appear as below.
The result
So when we enter the password, it appears as a black circle, so let's create it and figure out what it is.
Let's change the type to password in the above source. You can enter other information as below.
<input type="password" name="mypw" placeholder="비enter password" maxlength="20" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
<input type="password" name="mypw" placeholder="enter password" maxlength="20" />
</form>
</body>
</html>
The result
This is the password input form J. name = "" This part is used when using php. The name information represents the value of the password entry form.
It is hard to understand for now, but as I keep saying, you will know as we cover other lessons.
Checkbox
Checkboxes are used to check multiple items, such as selecting a hobby, for example.
Let's do it.
<input type="checkbox" name="computer" value="computer" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
<input type="checkbox" name="computer" value="computer" />computer
</form>
</body>
</html>
Here is the actual application.
The result
There is simply a check box on top. If you enter the word “computer”, it will be as follows.
The result
computer
And there is something called checked, which is checked and marked.
<input type="checkbox" name="computer" value="computer" checked/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
What is your hobby?<br />
<form name="Name of the form" action="Address to send value" method="post method or get method">
computer <input type="checkbox" name="computer" value="computer" checked/>
Listen to music <input type="checkbox" name="listening" value="listening" checked/>
</form>
</body>
</html>
The result
computer Listen to music
As above. ^^
Radio button
The radio button is a function to select only one of various items.
<input type="radio" name="" />
If you are in the same group above, you will need to unify the name values. If you create 5 radio buttons and 5 are in the same group, all 5 items should have the same name value. And if you enter checked, it is checked by default.
Um ... what do you have to choose from? Let's take a carrier as an example.
Please select the mobile carrier you are using.
T Mobile
Virgin
AT&T
The above sources are as follows. You could see that the name value is unified by telecom. If you click the radio button, you can see that the button that was already selected is released when you click another button.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
Please select the mobile carrier you are using.<br />
<form name="Name of the form" action="Address to send value" method="post method or get method">
T Mobile<input type="radio" name="telecom" value="T Mobile" />
Virgin<input type="radio" name="telecom" value="Virgin" />
AT&T<input type="radio" name="telecom" value="AT&T" />
</form>
</body>
</html>
Now let's test this by assigning different numbers to the end of the name value.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Learning the form tag</title>
</head>
<body>
Please select the mobile carrier you are using.<br />
<form name="Name of the form" action="Address to send value" method="post method or get method">
<p>Please select the mobile carrier you are using.</p>
T Mobile<input type="radio" name="telecom1" value="T Mobile" />
Virgin<input type="radio" name="telecom2" value="Virgin" />
AT&T<input type="radio" name="telecom3" value="AT&T" />
</form>
</body>
</html>
Let's test again below. If you press this button and report it by pressing this button, pressing the other button does not release the previous button.
Please select the mobile carrier you are using.
You should unify the name it the elements are in the same group because this error will appear. Otherwise you will not be able to enter the correct information in your php program. ^^
Textarea tag to enter many lines
The textarea tag is a tag that allows you to enter multiple lines of text. For example, when you fill out an online document, you are entering a self-introduction letter or a growth process.
<textarea name="application_form"> What to enter </textarea>
You can use as above.
Select box
The select box selects one of several lists. It is mainly used when choosing birthdate or job.
The sources are like below. For example, you could specify the year of your birthday.
You can put checked in the place where you want to make the initial selection. First, open the select tag and set the name value. It opens the option tag and inserts the information to be displayed in the select tag. In this case, you have to put value.
That way, when you pass information from this php, that value will be passed. Then, after inserting the option tag, it rewrites the corresponding value so that the person who are signing up can see it and closes it with option tag. ^^
<select name="birth">
<option value="2000" selected(initially selected)>2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Learning the form tag </title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
<select name="birth">
<option value="2000" selected(initially selected)>2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
</form>
</body>
</html>
So let's try to run it below. Using the practice area on the left menu, you do not have to use an editor like Notepad ++ or textwrangler.
The result
You can also apply to other examples such as job, month, first class by using the above select box example sentence.
submit and reset
Let's learn about submit and reset.
Submit is a button that sends information such as ID name, address, and phone number that we have created so far. Then the information will be sent to the page set as the receiving page in php post method. Tags are simple.
<input type="submit" name="submit" value="text to display" / >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
<select name="birth">
<option value="2000" selected(initially selected)>2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
<input type="submit" name="submit" value="complete"/ >
</form>
</body>
</html>
That’s all!
Reset is used to clear all of our writings. I think you have seen a lot of them, so you do not need any more explanation.
<input type="reset" name="reset" value="text to display" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag</title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
<input type="text" placeholder="reset after entering text" name="submit" value=""/ >
<input type="submit" name="submit" value="send"/ >
<input type="reset" name="reset" value="reset"/>
</form>
</body>
</html>
the tag as above could be used when creating membership form.
Let's make a quick and simple membership form (If you need to refresh, do it after a quick rest!) I will create it using table tag. Even if you do not have a good table, most of the membership forms use tables. ^^
If you enter the source below, you can see the membership form under the source.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning the form tag </title>
</head>
<body>
<form name="Name of the form" action="Address to send value" method="post method or get method">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="user_name" /></td>
</tr>
<tr>
<td>ID</td>
<td><input type="text" name="user_id" /></td>
</tr>
<tr>
<td>Password </td>
<td><input type="password" name="user_pw" /></td>
</tr>
<tr>
<td>Confirm Password </td>
<td><input type="text" name="user_pw2" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="user_address" /></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><select name="user_birth_year">
<option value="2000" selected>2000</option>
<option value="2001" selected>2001</option>
<option value="2002" selected>2002</option>
<option value="2003" selected>2003</option>
<option value="2004" selected>2004</option>
</select>
year
<select name="user_birth_month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
month
<select name="user_birth_day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
day
</td>
</tr>
<tr>
<td>Job</td>
<td><select name="user_job">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="developer">Developer</option>
<option value="publisher">Publisher</option>
<option value="driver">Driver</option>
<option value="architecture">Architect</option>
<option value="actor">Actor</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="done" />
<input type="reset" name="reset" value="reset" /></td>
</tr>
</table>
</form>
</body>
</html>
The result
| Name | |
| ID | |
| Password | |
| Confirm Password | |
| Address | |
| Date of Birth | year month day |
| Job | |