HTML表单页面的运用
本章目标:掌握表单基本结构<form>
掌握各种表单元素
能理解post和get两种提交方式的区别
本章重点:掌握各种表单元素
本章难点:post和get两种提交方式的区别
一、 HTML表单
表单:
表单是一个能够包含表单元素的区域。
表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。
表单是用<form>元素定义的:
Input:
最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下:
文本框:在表单中,文本框用来让用户输入字母、数字等等。
单选按钮:当需要用户从有限个选项中选择一个时,使用单选按钮。
注意,各选项中只能选取一个。
复选框:当需要用户从有限个选项中选择一个或多个时,使用复选框。
表单的action属性和提交按钮:当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。
如果在上面这个文本框中输入一些字符,按下提交按钮以后,输入的字符将被提交到页面“action.asp”。
更多示例:
简单的下拉列表:
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
这个例子说明了在HTML页面如何创建下拉列表。下拉列表是可以选择的列表。
预选的下拉列表:
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
这个例子说明了如何创建一个含有预先选定元素的下拉列表。
文本域:
<html>
<body>
<p>
This example demonstrates a text-area.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
这个例子说明了如何创建文本域(多行文本),用户可以在其中输入文本。在文本域中,字符个数不受限制。
创建按钮:
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
这个例子说明了如何创建按钮。按钮上的文字可以自己定义。
数据周围的标题边框:
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form>
Height<input type="text" size="3">
Weight<input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is too old.
</p>
</body>
</html>
这个例子说明了如何在数据周围画带有标题的边框。
从表单发送电子邮件:
<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post"
enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name" value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail" value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment" value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
这个例子说明了如何从一个表单发送电子邮件
相关文章
- 怎么html文字下划线,HTML怎么设置下划线?html文字加下划线方法
- HTML添加背景图片_html背景图片铺满网页
- 每日分享html之两个input搜索框、两个button按钮、一个logo效果
- 页面浮动广告举例_html向下浮动代码
- 完整html网页代码_css长度单位
- 网页实时显示时间_html页面布局代码
- 用html设计一个动漫网站_HTML一个介绍的页面代码
- html script 换行,JavaScript中怎么换行
- html.dropdownlistfor_see的用法
- html静态网页设计代码_静态网页设计心得
- html表格空格符是什么,HTML中的空格符号是什么
- wordpress tags标签改造id显示加后缀html显示
- 阻止HTML表单提交跳转页面,使用 Jquery Ajax 请求接口
- Django simpleUI 修改 element-UI 引用的 index.js 和 index.css 链接 以及 base.html 的 vue 资源链接
- 用js实现html页面水印
- Linux上跑起来的HTML之旅(linux运行html)
- 让Linux灵活运行HTML:简单有效的方法(linux运行html)
- Linux系统快速掌握HTML下载指南(linuxhtml下载)
- 用HTML操作MySQL数据库(html调用mysql)
- HTML <ruby> 标签
- 在ASP中使用FSO组件生成HTML页面
- ASP网站生成静态html页面技术小结
- html锁定页面(js遮罩层弹出div效果)
- 通用PHP动态生成静态HTML网页的代码
- js实现单一html页面两套css切换代码
- 页面爬虫(获取其他页面HTML)加载到自己页面示例
- c#利用system.net发送html格式邮件
- 在ASP中不用模板生成HTML静态页直接生成.html页面