Home > Article > Web Front-end > Various examples of how to parse HTML forms
Various examples of how to parse HTML forms
- 不言Original
- 2018-06-05 11:18:512392browse
This article mainly uses various examples to help you understand how to use the HTML form form, and explains how the form form interacts with the user. Interested friends can refer to
九A simple example analyzes the use of HTML form form for your reference. The specific content is as follows
1 form form tag
How does the website interact with users? The answer is to use HTML forms. The form can transmit the data entered by the viewer to the server, so that the server-side program can process the data passed by the form.
Grammar:
d7534d02403f614ad039b12d3a33b1b2
•ff9c23ada1bcecdd1a0fb5d5a0f18437 ：ff9c23ada1bcecdd1a0fb5d5a0f18437 Tags appear in pairs, starting with ff9c23ada1bcecdd1a0fb5d5a0f18437 and ending with f5a47148e367a6035fd7a2faa965022e.
•action: The place where the data entered by the viewer is sent, such as a PHP page (save.php).
•method: The method of data transmission (get/post).
All form controls (text boxes, text fields, buttons, radio boxes, check boxes, etc.) must be placed between the ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e tags (otherwise the information entered by the user can Submission cannot be made to the server!).
The difference between method:post/get This part is a matter for back-end programmers to consider. Interested friends can check the wiki of this section, which has detailed introduction.
XML/HTML CodeCopy content to clipboard
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>2 input/text/password text and password input box
When users want to type letters, numbers, etc. in the form, the text input box is used. The text box can also be converted into a password input box.
Syntax:
##XML/HTML CodeCopy content to the clipboard
<form> <input type="text/password" name="名称" value="文本" /> </form>When type =”text”, the input box is a text input box;
When type="password”, the input box is a password input box.
name: Name the text box for use by the background programs ASP and PHP.
value: Set the default value for the text input box. (Generally used as a prompt)
XML/HTML CodeCopy content to the clipboard
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本输入框、密码输入框</title>
</head>
<body>
<form method="post" action="save.php">
账户:<input type="text" name="myName" /><br><br>
密码:<input type="password" name="pass" />
</form>
</body>
</html> Browser effect:
Syntax:
6ddd40bcb8ab022787bf1713b84268ecText default value40587128eee8df8f03d0b607fe983014
2. cols: The number of columns in the multi-line input field.
3. rows: The number of rows in the multi-line input field.
4. Default values can be entered between tags.
XML/HTML CodeCopy content to clipboard
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
<label>个人简介：</label><br>
<textarea cols="40" rows="10">在这里输入内容...</textarea><br>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>Browser effect:
4 radio/checkbox radio button and checkbox
When using a form to design a questionnaire, in order to reduce user operations, it is a good idea to use a select box, in html There are two types of selection boxes, namely radio button boxes and check boxes. The difference between the two is that the user can only select one option in the radio button box, while in the check box the user can select multiple or even all options. Grammar:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>1. When type="radio", the control is a radio button
2. When type="checkbox", the control For the check box
3.value: The value of submitting data to the server (used by the background program PHP)
4.name: Name the control for use by the background program ASP and PHP
5.checked: When When setting checked="checked", this option is selected by default
6. Note: The name values of radio buttons in the same group must be consistent. For example, the above example has the same name "radioLove", so that the radio buttons in the same group have the same name. The select button can function as a radio selection.
XML/HTML CodeCopy content to clipboard
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单选框、复选框</title>
</head>
<body>
<form action="save.php" method="post" >
你喜欢旅游吗？请选择：<br>
<input type="radio" name="radiolove" value="like" checked="checked">喜欢
<input type="radio" name="radiolove" value="dislike" >不喜欢
<input type="radio" name="radiolove" value="unknown" >无所谓
<br><br>
你喜欢哪些运动？<br>
<input type="checkbox" name="checkbox" value="Run" checked="checked"> Run
<input type="checkbox" name="checkbox" value="Basketball"> Basketball
<input type="checkbox" name="checkbox" value="FootBall"> FootBall
<input type="checkbox" name="checkbox" value="Fat" checked="checked"> Fat
</form>
</body>
</html>
The browser effect is:
This demo code implements a radio button box containing 3 options, and a check box containing 4 options;
同一个选框的name值必须一致，否则不能实现单选和复选功能。在同一个选框中value值必须不同，否则传递到后台数据有误。
5 select/option使用下拉列表框单选
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
语法：
<option value=”name” selected=”selected”>Run</option>
Value为向服务器提交的值；
设置selected=”selected”属性，则该选项就被默认选中。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">
<br><br>
<label>留言给我们:</label><br>
<textarea cols="40" rows="5">在这里输入留言...</textarea>
<br>
<input type="submit" value="点击确认提交留言" name="advise">
</form>
</body>
</html>浏览器效果：
6 select/multiple/option使用下拉框多选
下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用下拉列表框进行多选</title>
</head>
<body>
<form action="save.php" method="post" >
<label>爱好:</label><br>
<select multiple="multipl">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<br><br>
<label>留言给我们:</label><br>
<textarea cols="40" rows="5">在这里输入留言...</textarea><br>
<input type="submit" value="点击确认提交留言" name="advise">
</form>
</body>
</html>浏览器效果：
7 input/submit使用提交按钮提交数据
语法：892fc1b3743fe80ae197d7a1a60c2276
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>提交按钮</title>
</head>
<body>
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value=" " name="myName " />
<input type="submit" value="提交" name="submitBtn" />
</form>
</body>
</html>浏览器效果：
8 input/reset使用重置按钮重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
语法：
4091b5f1b74b6c5332cb5e27ee906caf1
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>重置按钮</title>
</head>
<body>
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>
</body>
</html>浏览器效果：
9 表单中label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
f2601599f81b7104ea47b5c86080e721
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>
<body>
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" /><br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" /> <br />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email"><br>
你对什么运动感兴趣：<br>
<label for="run">慢跑</label>
<input type="checkbox" name="sports" id="run"><br>
<label for="climb">登山</label>
<input type="checkbox" name="sports" id="climb"><br>
<label for="basketball">篮球</label>
<input type="checkbox" name="sports" id="basketball"><br>
</form>
</body>
</html>浏览器效果：
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐：
The above is the detailed content of Various examples of how to parse HTML forms. For more information, please follow other related articles on the PHP Chinese website!