Home  >  Article  >  Web Front-end  >  Explanation of knowledge related to forms in HTML (code examples)

Explanation of knowledge related to forms in HTML (code examples)

不言
不言Original
2018-08-30 11:36:082424browse

This article brings you knowledge about forms in HTML (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Open the link in a new browser window

3499910bf9dac5ae3c52d5ede7383485Tag By default, the linked web page is in the current browser window Open in a browser window, sometimes we need to open in a new browser window. The

<a href="目标网址" target="_blank">新的浏览器窗口打开</a>

mailto

3499910bf9dac5ae3c52d5ede7383485 tag also has the function of connecting to an email address. Using mailto allows visitors to easily send messages to the website administrator. e-mail.

mailto Email address, the browser will automatically call the default client email program (such as OutLock), and automatically fill in the recipient's address in the recipient box.

cc= Cc address, use cc=address after the recipient address, you can fill in the Cc address.

bcc= For blind carbon copy address, use bcc=address after the recipient address. You can fill in the blind carbon copy address

; Multiple recipients, CC, BCC, separate the addresses of multiple recipients with semicolons, you can send to multiple recipients

subject= Email subject, use subject= to add the email subject

body Email content, use body= to add the content of the email

If there are multiple parameters after mailto, the first A parameter must start with "?", and each subsequent parameter must be separated by "&".

<a href="mailto:123456@qq.com">发送</a>
<a href="mailto:123456@qq.com?cc=123456@qq.com">发送</a>
<a href="mainto:123456@qq.com?bcc=654321@qq.com">发送</a>
<a href="mailto:123456@qq.com;654321@qq.com">发送</a>
<a href="mailto:123456@qq.com?subject=发送电子邮件">发送</a>
<a href="mailto:123456@qq.com?body=欢迎来到HTML代码世界">发送</a>

form

Use HTML form (form) to interact with users. The form can transmit the data entered by the browser to the server, so that the server-side program can process the data passed by the form.

ff9c23ada1bcecdd1a0fb5d5a0f18437: ff9c23ada1bcecdd1a0fb5d5a0f18437 tags appear in pairs, ff9c23ada1bcecdd1a0fb5d5a0f18437 starts, f5a47148e367a6035fd7a2faa965022e ends

action : Where the data entered by the browser is transmitted

method: The method of data transmission (get/post)

Note: 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 may not be submitted to the server)

<form method="传送方式" action="服务器文件">
<form method="post" action="save.php">
    <label for = "username">用户名:</label>
    <input type = "text" name="username" />
    <input for = "pass">密码:</label>
    <input type = "password" name="pass">

The label label in the form form

The label label is used to improve usability for mouse users. This control will be triggered if the text is clicked within the label label. That is to say, when the user clicks to select the label, the browser will automatically turn the focus to the form control related to the label (the form control associated with the label will be automatically selected).

Note: The value in the for attribute of the label must be the same as the value of the id attribute of the control.

<label for="控件id名称">

Text input box, password input box

The text input box is used when the user wants to type letters, numbers, etc. in the form. . The text box can also be converted into a password input box.

type: 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 program ASP and PHP

value: Set the default value for the text input box. (Generally used as a prompt)

<form>
    姓名:
    <input type = "text" name="myName">
    <br/>
    密码:
    <input type = "password" name="pass">
</form>

Text field

When the user needs to enter a large section of text in the form, text needs to be used Enter the domain.

4750256ae76b6b9d804861d8f69e79d3 Tags appear in pairs, 4750256ae76b6b9d804861d8f69e79d3 begins, 40587128eee8df8f03d0b607fe983014 ends;

cols: The number of columns in the multi-line input field;

rows: The number of rows in the multi-line input field;

在4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014标签之间可以输入默认值。注意cols和rows这两个属性可用CSS样式的width和height来代替:col用width、row用height来代替。

<form method = "post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10">在这里输入内容。。。</textarea>
</form>

单选框、复选框

在HTML中有两种选择框,单选框复选框,两者的区别是单选框中的选项用户只能选择一项;复选框中用户可以任意选择多项甚至全选。

type:当type="radio"时为单选框,type="checkbox"时为复选框

value:提交数据到服务器的值

name:为控件命名

checked:当设置checked="checked"时,该选项被默认选中

注意:同一组单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的用作。

下拉列表框

<option value=&#39;提交值&#39;>选项</option>

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。

value='提交值'——>向服务器提交的值;选项——>显示的值

selected="selected"属性,则该选项就被默认选中。

下拉列表可以进行多选操作,在53ef528b06ec79ef05684370cfbe8ed2标签中设置multiple="multiple"属性,就可以实现多选功能,在window操作系统下,进行多选时按下Ctrl时同时进行单击(在Mac下使用Command+单击),可以选择多个选项。

提交按钮和重置按钮

表单中有两种按钮可以使用,分别是提交按钮,重置按钮。

提交按钮

type:只有当type值设置为submit时,按钮才有提交作用

value:按钮上显示的文字

重置按钮

type:只有当type值设置为reset时,按钮才有重置作用

value:按钮上显示的文字

<input type="submit" value="提交">
<input type="reset" value="重置">

相关推荐:

HTML ------ 关于表单 Form - Tina_xy

带你掌握HTML中table和form表单

The above is the detailed content of Explanation of knowledge related to forms in HTML (code examples). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn