Home > Article > Web Front-end > Basic html tutorial on interacting with viewers, form tags
Basic html tutorial on interacting with viewers, form tags
- 零下一度Original
- 2017-05-12 13:57:011506browse
1. Use form tags to interact with users
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>表单标签</title> 6 </head> 7 <body> 8 <form> 9 <label for="username">用户名:</label> 10 <input type="text" name="username" id="username" value="" /> 11 <label for="pass">密码:</label> 12 <input type="password" name="pass" id="pass" value="" /> 13 <input type="submit" value="确定" name="submit" /> 14 <input type="reset" value="重置" name="reset" /> 15 </form> 16 </body> 17 </html>
How does the website interact with users? The answer is to use HTML form(form). 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:
<form method="传送方式" action="服务器文件">
Explanation:
1.
tags (otherwise the information entered by the user may not be submitted to the server!).2. Method: The difference between post/get. This part is a matter for back-end programmers to consider.
Give it a try: Add code to the
15 16When the user wants to type letters, numbers, etc. in the form, the text input box will be used. The text box can also be converted into a password input box.
Grammar:
<form> <input type="text/password" name="名称" value="文本" /> </form>
1, type:
When type="text", the input box is a text input box;
When type=" password", the input box is the password input box.
2. name: Name the text box for use by background programs ASP and PHP.
3. value: Set the default value for the text input box. (Generally used as a prompt)
Example:
<form> 姓名： <input type="text" name="myName"> <br/> 密码： <input type="password" name="pass"> </form>
Results displayed in the browser:
Try it: Insert name and password input boxes into the form
1. Enter the code on line 10 in the editor:
<input type="text" name="myName" />
2. Enter the code on line 13 of the editor:
<input type="password" name="pass" />
At least one space between attributes.
hidden Define a hidden input field
image Define an image as a submit button
number Define a numeric field with a spinner control
password Define the password field. Characters in the field will be masked
radio Define the radio button
range Define the numeric field with a slider control
reset Define the reset button. The reset button will reset all form fields to their initial values
search Define the text field used for search
submit Define the submit button. The submit button sends data to the server
text Default. Define a single-line input field where users can enter text. The default is 20 characters
url defines the text field used for URL
Some people actually say that value is rarely used now. I guess beginners don’t know that placeholder is a new attribute of H5, and it is from IE6 to IE9. Native placeholder is not supported.
If you just use placeholder without solving the compatibility problem (you have to add a long section of compatibility code to use placeholder), it can only be said that you are just looking around, not working.
(The red words are the content of the comment area, some of which are temporarily incomprehensible)
3. Text field, supports multi-line text input
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>文本域</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>个人简介：</label> 10 <textarea>在这里输入内容...</textarea> 11 <input type="submit" value="确定" name="submit" /> 12 <input type="reset" value="重置" name="reset" /> 13 </form> 14 </body> 15 </html>
When the user needs to enter the form in the form When entering large blocks of text, you need to use text input fields.
Grammar:
<textarea rows="行数" cols="列数">文本</textarea>
1. .
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. You can enter a default value between the tags.
Example:
Display the results in the browser:
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
来试一试：修改文本域的列数和行数
在编辑器中第10行
标签的语义一定要根据单词来记忆，这样才会扎实透彻，
preformattde：预定义格式(文本)的意思，这里的<textarea>是多行文本区域的意思，<p class="sycode">根据意思就知道不同了，而且<textarea>中的默认字样，用户可以自行更改的，<pre class="brush:php;toolbar:false">中的内容，用户只能看不能动！ <br>
col与rows设定的值只会影响输入框的大小，不会影响你输入多少字
四、使用单选框、复选框，让用户选择
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>单选框、复选框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>性别:</label> 10 <label>男</label> 11 <input type="radio" value="1" name="gender-man" /> 12 <label>女</label> 13 <input type="radio" value="2" name="gender-woman" /> 14 </form> 15 </body> 16 </html>
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，
两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
如下面代码：
在浏览器中显示的结果：
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
来试一试：修改单选框代码错误（男、女可以同时选择），使其具有单选作用。
1、在编辑器中第11行、13行代码有错误，请改正。
记住：
1、同一组单选框name命名要一致。
2、你是否输入像下面的代码：
<label>男</label> <input type="radio" value="1" name="gender" /> <label>女</label> <input type="radio" value="2" name="gender" />
五、使用下拉列表框，节省空间
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>下拉列表框</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>爱好:</label> 10 <select> 11 <option value="看书">看书</option> 12 <option value="旅游">旅游</option> 13 <option value="运动">运动</option> 14 <option value="购物">购物</option> 15 </select> 16 </form> 17 </body> 18 </html>
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
讲解：
1、value：
2、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
在浏览器中显示的结果：
来试一试：把“爱好”下拉列表的“旅游”选项设置为默认选项
在编辑器中的第12行补充代码 selected="selected"。
你是否输入像下面的代码：
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
The above is the detailed content of Basic html tutorial on interacting with viewers, form tags. For more information, please follow other related articles on the PHP Chinese website!