zoukankan      html  css  js  c++  java
  • HTML的表单

    概述

    1、表单用于收集不同类型的用户输入,用户填写表单,点击提交按钮提交数据给服务器。
    2、表单是一个包含表单元素的区域。
    3、表单元素是允许用户在表单中输入内容,多数情况下被用到的表单标签是输入标签(<input>)。<input>元素是最重要的表单元素。输入类型是由类型属性(type)定义的。比如:

    • 文本域(Text Fields)
      文本域通过<input type="text">标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
    • 密码字段
      密码字段通过标签<input type="password">来定义,密码字段字符不会明文显示,而是以星号或圆点替代。
    • 单选按钮(Radio Buttons)
      <input type="radio">标签定义了表单单选框选项,checked关键字确定预选值。按钮的value属性用来指定按钮上显示的文本信息。
    • 复选框(Checkboxes)
      <input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
    • 提交按钮(Submit Button)
      <input type="submit">定义了提交按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性(action)定义了目的文件的文件名。由动作属性(action)定义的这个文件通常会对接收到的输入数据进行相关的处理。按钮的value属性用来指定按钮上显示的文本信息。
    • 下拉列表
      <select>定义了下拉选项列表,下拉列表框是一个可选列。<option>定义下拉列表中的选项,可以使用selected关键字确定预选值。
    • 等等...
      4、表单使用表单标签<form>来设置,一个网页中可以有多个表单。
    <form>标签语法格式

    1、

    <form action="提交地址" method="提交方式">表单内容</form>
    

    说明:表单内容可以是<input><textarea><button><select><option><optgroup><fieldset><label>等标签。
    2、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址。action属性和超链接中的href属性一样,都可以向服务器发送(request)例如:http://localhost:8080/html/login这是请求路径,表单提交数据最终提交给:localhost机器上的8080端口对应的软件。
    3、表单是以什么格式提交数据给服务器的?
    http://localhost:8080/html/login?username=123&password=123
    格式:action?name=value&name=value...
    HTTP协议规定必须以这种格式提交给服务器。
    4、表单填写了name属性的一律会提交给服务器

    <form>标签属性

    accept:服务器接收到的文件的类型(html5版本也不支持);
    accept-charset:服务器可处理的表单数据字符集;
    action:当提交表单时向何处发送表单数据;
    autocomplete:是否启用表单的自动完成功能,值可以是:on、off,html5新增;
    enctype:在向服务器发送表单数据之前如何对其进行编码,method="post"时可以使用,值可以是:multipart/form-data、text/plain等;
    method:用于发送表单数据的HTTP方法,值可以是:get、post;
    name:规定表单的名称,在xhtml中也废弃,使用id来代替;
    novalidate:提交表单时不进行验证,值为:novalidate,html5新增;
    target:在何处打开action属性中的地址,值可以是:_blank、_self、_parent、_top。

    代码示例
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>表单</title>
    	</head>
    	<body>
    		<form action="http://localhost:8080/html/login">
    			<table>
    				<tr>
    					<td>username:</td>
    					<td><input type="text" name="username"></td>
    				</tr>
    				<tr>
    					<td>password:</td>
    					<td><input type="password" name="password"></td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center">
    						<input type="submit" value="登录">
    						<input type="reset" value="清空">
    					</td>
    				</tr>
    			</table>
    		</form>
    		<hr color="red">
    		<form>
    			<!--button只是一个普通按钮,不能提交表单-->
    			普通按钮:<input type="button" value="点我"><br>
    			单选按钮:<br>
    			<!--name相同的情况下只能选择一个,value是提交的数据-->
    			<input type="radio" name="性别" value="男" checked>男<br>
    			<input type="radio" name="性别" value="女">女<br>
    			复选框:<input type="checkbox"><br>
    			下拉列表:
    			<select name="水果">
    				<option value="西瓜">西瓜</option>
    				<option value="苹果" selected>苹果</option>
    				<option value="桃子">桃子</option>
    			</select>
    		</form>
    	</body>
    </html>
    

    在这里插入图片描述

  • 相关阅读:
    关于表单的jQuery练习
    jQuery中的综合动画
    jQuery中自定义简单动画的实现
    清除浮动
    定位
    盒子模型
    笔记
    笔记
    翻页
    DOM
  • 原文地址:https://www.cnblogs.com/yu011/p/13493819.html
Copyright © 2011-2022 走看看