HTML 关于表单 Form_html/css_WEB-ITnose
Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源。
掌握表单(Form)有以下几个要点:
重要form属性
form常用控件
form提交方式
§ 重要form属性
action {URL}:规定表单提交时向何处发送数据。
enctype :规定在发送表单数据之前如何对表单数据进行编码。(值如下)
application/x-www-form-urlencoded :在发送前编码所有字符(默认为此方式)。
multipart/form-data :不对字符编码。 注:使用包含文件上传控件的表单时,必须使用该值。
method:指定表单以何种方法发送。
get :from表单里所填的值,附加在action指定的URL后面,做为URL链接而传递。(可以在地址栏看见表单的提交信息)
post :from表单里所填的值,附加在HTML Headers上。(不可以在地址栏看见表单的提交信息)
§ form常用控件
建议:每一个表单元素的文字描述都使用(两标签之间的内容即为对绑定的表单控件的文字描述)
注意:每个表单元素应当分配 name 属性 和 id 属性。( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)
name 属性:用来将数据提交到服务器;
id 属性:用来在客户端做相应的操作;如:
文本输入框:
1)、input type="text" 单行文本框
<label for= "Account">账号:</label><input type="text" name="Account" id="Account" value="账户" maxlength="20">
2)、textarea 多行文本框
<label for="comment">评论:</label><textarea name="comment" id="comment" cols="30" rows="15" maxlength="100"></textarea>
说明: maxlength 规定文本区域的最大字符数;如果在
密码输入框:
定义密码字段。(字符会被遮盖)
<label for= "Password">密码:</label><input type="password" name="password" id="password" value="密码">
单选框:
设置单选按钮 以及获取选中的单选按钮的值
<form name="MyForm" action="URL" method="post"> <p>性别: <input type="radio" name="sex" id="male" value="male"><label for="male">male</label> <input type="radio" name="sex" id="female" value="female"><label for="female">female</label> </p> <input type="button" value="获取选中项" onclick="getValue();" /></form><br /><br />//获取选中的单选值<script language="javascript">function getValue(){ //获取表单的所有提交信息(根据表单的name属性) var myform = document.forms["MyForm"]; //sex是单选按钮的name属性值 var radioChoices = myform.sex; //遍历整个单选项表 for(i=0;i<radioChoices.length;i++) if(radioChoices[i].checked) break; //发现了被选中项,退出 alert("选中的选项是:"+radioChoices[i].value);}</script>
注意:
1)、在客户端,Javascript 对表单及表单元素的操作,更常用其name 属性而不是id属性。因为,对于某些特定的表单元素(如:单选按钮等),使用其name 属性更易于获得元素值,也更方便向服务器传送数据!
2)、保证同一组单选按钮的name 属性值相同。
复选框:
复选框的“全选”、“全不选”、“反选”功能 以及 所选复选框值的获得功能
<form name="MyForm" action="URL" method="post"> <input type="checkbox" name="hoboy" id="music"><label for="music">music</label> <input type="checkbox" name="hoboy" id="swim"><label for="swim">swim</label> <input type="checkbox" name="hoboy" id="dance"><label for="dance">dance</label> <input type="button" value="全选" onclick="selectBoxs(1);" /> <input type="button" value="全不选" onclick="selectBoxs(0);" /> <input type="button" value="反选" onclick="selectBoxs(-1);" /> <input type="submit" value="提交" onclick="submit();" /></form><script language="javascript">//全选,全部选,反选function selectBoxs(value){ var myform = document.forms["MyForm"]; //hoboy 为所有复选框的name属性值 var CheckboxChoices = myform.hoboy; for(var i=0;i<CheckboxChoices.length;i++) //遍历每一个选项 if(value < 0)//反选 CheckboxChoices[i].checked = !CheckboxChoices[i].checked; else //value为1是则全选,为0时则全不选 CheckboxChoices[i].checked = value;}function getSelect(){ var myform = document.forms["MyForm"]; var CheckboxChoices = myform.hoboy; //创建数组放checkbox选中的值 var arrayCheckbox = new Array(); for(var i=0;i<CheckboxChoices.length;i++){ if(CheckboxChoices[i].checked) arrayCheckbox.push(CheckboxChoices[i].value); } alert(arrayCheckbox);}</script>
注意:保证同一组复选框按钮的name 属性值相同。
下拉框:
下拉框的重要属性:
multiple 属性:用于设置下拉表框的类型(多选还是单选)
type 属性:JS根据type 属性的值获得下拉列表框select 控件的类型。
type 属性的值为:select-multiple(多选) 或 select-one(单选)
下拉列表框默认只能选中一项,若要设置为可以多选,则设置
size属性:定义可见选项的数目。size="3",即下拉框内可以显示三个可选选项。
<form name="MyForm" action="URL" method="post"> <p>简单的选择列表</p> <select id="myselect" name="myselect" multiple="multiple" size="3"> <option value="Apples">Apples</option> <option value="Bananas">Bananas</option> <option value="Cherries">Cherries</option> <option value="oranges">oranges</option> </select></br> <input type="button" onclick="getSelectValue('myselect')" value="查看选项" /></form><br /><br /><script language="javascript"> //获取选中的下拉列表值 function getSelectValue(myselect){ var myform = document.forms["MyForm"]; var select = myform.elements[myselect]; //判断是单选还是多选 if(select.type == "selece-one"){ var oneChoice = select.selectedIndex;//获取选中项 alert("单选" + select.options[oneChoice].value);//获取选中项的值 } else{ var multiChoices = new Array(); //遍历整个下拉菜单 for(var i=0;i<select.options.length;i++) if(select.options[i].selected) multiChoices.push(select.options[i].value); alert("多选" + multiChoices); } }</script>
提示:
在不同操作系统中,选择多个选项的差异:
由于上述差异的存在,同时由于需要告知用户可以使用多项选择,对用户更友好的方式是使用复选框。
§ form提交方式
表单的提交方式由method属性的取值决定,所以form提交方式有以下两种:
get 方式:
表单数据将会追加action指定的URL后面,做为URL链接而传递(以查询字符串的形式提交到服务端)。
变量提交的样式为:html元素的name属性=提交的值。多个变量,在URL链接后面以 & 符号隔开。
post方式:
表单数据将附加在请求体(HTML Headers)上被发送出去,并不附加在URL链接后面。
建议:表单通常还是以post方式提交比较好,这样可以不破坏URL,况且URL还有长度限制。
get 与 post 的区别:
1)、get是从服务器上获取数据;post是向服务器传送数据
2)、数据的查询:比如浏览论坛或博客时,URL一般包含了分类、页码数、每页记录数等信息。 get 方式,能一目了然的看到所要查询的信息; post 因为隐藏掉了这些信息,不方便进行查询。
3)、数据安全性:对一项记录,进行更改、添加操作时,get 方式附加在URL上,会泄露数据;post 方式,能隐藏数据,保证数据的安全性。
4)、数据传输量:get 虽然方便查询,但由于是附加在URL上,使得其传送的数据量较小,不能大于2KB;post传送的数据量较大,一般被默认为不受限制。
资源链接
推荐 : Fish Li 博主的 ---- 细说Form(表单)

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...

Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...

Die Notwendigkeit der Registrierung von Vuerouter in der Datei index.js -Datei im Ordner Router Bei der Entwicklung von VUE -Anwendungen stoßen Sie häufig Probleme mit der Routing -Konfiguration. Besonders...
