07 html 表单form元素 各种input元素 常用元素综合案例

Html的表单元素,主要用途:用户输入数据,并提交给服务器

基本语法是

<form action=”url”(是指把表单提交给谁) method=”提交的方法(get/post),默认是get”>

各种输入元素【输入框,下拉列表,文本域,密码框】

</form>

案例:登陆界面

login.html

<html>
<head>
<title>登陆界面</title>
</head>
<body>
<form action="ok.html"  method="get">
用户名:<input type="text" name="username" /><br/>
<!--空格实体,或者全角空格-->
密&nbsp;码:<input type="password" name="pwd"/><br/>
<input type="submit" value="登陆"/>&nbsp;&nbsp;<input type="reset" value="重新填写">
</form>
</body>
</html>

ok.html

<html>
<body>
登陆成功
</body>
</html>

运行效果图

表单的基本语法

<form action="url" method=*>

... 
... 
<input type=submit> <input type=reset>
</form> 

表单中提供给用户的输入形式

<input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

*=GET, POST

(1)表单元素的格式

<input  type=*  name=**/>

type=text[文本框] 、password[密码框] 、hidden[隐藏域] 、checkbox[复选框] 、radio[单选框]

submit[提交按钮] 、reset[重置按钮] 、image[图片按钮]

name 是你给该表单元素取名

(2)action指定把这些请求交给哪些页面

Action一般提交的是servlet,jsp文件

Post不会把提交内容在地址栏显示

Get会把提交的用户名和密码显示但地址栏的

图片也可以做成提交按钮

<input type="image" src="girl.jpg"/>

value 是在按钮上显示的字

Input元素举例

<html>
<body>
************  文本框与密码框    ************<br/>
名字:<input type="text" value="请输入名字" name="username"/><br/>
密码:<input type="password"   name="pwd"/><br/><br/>

************复选框(喜欢的水果)************<br/>
<!--name要保持一致-->
<input type ="checkbox" name ="v1">西瓜<br/>
<input type ="checkbox" name ="v1">苹果<br/><br/>

************单选框(选择性别) ************<br/>
<!--name要保持一致-->
<input type="radio" name="sex">男<br/>
<input type="radio" name="sex">女<br/><br/>

*******隐藏(他的用途主要是既可以提交数据,又不影响界面布局)****<br/>
<input type="hidden" value="123" name="sal"/><br><br/>

************下拉选择(请选择你的出生地)    ************<br/>
<select name="biradd">
<option value="">--请选择--</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
</select><br/><br/>

*****************文本域(请留言)*************<br/>
<textarea cols="20"  rows="10">请在这里输入……</textarea>  <br><br/>

***********文件控件(选择你要上传的文件)********<br/>
<input type="file" name="myfile"/>请选择文件 <br><br/>

</body>
</html>

显示效果:

时间: 2024-10-12 18:02:36

07 html 表单form元素 各种input元素 常用元素综合案例的相关文章

html_表单form中的input类型大集合

学到后面发现前面的内容都不是很巩固了. 知道自己的不足之后,最近在复习一些学过的知识. 做了一个表单form的input的属性type的大部分功能,当然还有没有涉及到的,比如range,time,month,number等等等等 贴上代码 <div class="content"> <h2>商品信息</h2> <form method="post" class="goods_form"> <d

关于表单form元素中onsubmit事件处理机制的认识

博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件是这么写的 :onsubmit="return validateForm();",首先validateForm()已经有返回值了,为什么在这里还要加一个return??这让我百思不得其解,直到看到一篇博文才恍然大悟,受益匪浅,以下是这篇博文的出处:http://blog.163.com/h

不通过getElementByName实现获取表单数据 (document.form表单的name值.input输入框的name值)

function update() { //document.form表单的name值.input输入框的name值 var username = document.form1.username; var mobile = document.form1.mobile; var qq = document.form1.qq; } <form name="form1" method="post" action=""> <table

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决 作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-21 18:43:32我要评论 chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下,感兴趣的朋友可以了解下 chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认

(三)关于kendo IU表单form各类控件的数据绑定

=====================input textarea============================= <div id="view"> <input data-bind="value: inputValue" /> <textarea data-bind="value: textareaValue"></textarea> </div> <script&g

HTML超文本标记语言(八)——表单&lt;form&gt;

一.表单<form>标签及其属性 HTML表单用于收集用户输入.基本格式如下: <form> . form elements . </form> 表单元素指不同类型的input元素.复选框.单选按钮.提交按钮等. 1.action属性:定义在提交表单时执行的动作,规定向何处提交表单的地址(URL)(提交页面). 通常,表单会被提交到web服务器上的网页.在如下例子中,指定了某个服务器脚本来处理被提交表单: <form action="action_pag

表单提交:button input submit 的区别

http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践.先给结论: 建议使用button[type=submit]来提交表单,而不是input: 只有单行文本控件时,回车会引发表单提交: 通过onsubmit事件可阻止表单提交. input[type=submit] 这是最常见的提交方式.不多说了,看图: 图中可以看到点击提交按钮后的URL是/?key

表单提交中的input、button、submit的区别(转来学习)

最近项目中用了很多的表单提交,发现input.button.submit甚至回车键都可以引发表单提交,下面将分别验证他们在使用中的区别. 1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type="submit" value="提交"> </form> 其中点击按钮后的url变为?name=22222222

表单 - Form - EasyUI提供的表单异步提交

方案一 被提交的表单 <form id="loginForm" method="post"> <table align="center"> <tr> <th align="right">用户名</th> <td> <input type="text" name="username"/> </td&g