HTML-form表单

Form表单用于用户进行登录,注册,提交等场景,所有要提交的数据都必须放在form标签中 <form action=" "  method=" ">;

action:提交地址、动作,与input标签中type标签的submit属性相关联。  <input type="submit" value="提交" />,提交地址是action的地址

method:提交方法,有get和post两种提交方法。

    get方法:提交数据可以在URL中看见,

               (1)以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数

       (2)URL长度有限制,所以传递的参数数据就有限制

       (3)由于数据可以看见,所以不安全

       (4)网页默认的请求是get

    post方法:   

       (1) 将form data 保存在http的请求

       (2) 没有长度限制

       (3) 提交的数据在url是看不到的,比较安全

       (4) 往往在开发中用于提交数据form表单提交post

       (5) 文件上传 method = post   enctype=multipart/form-data

表单标签

<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>     New 指定一个预先定义的输入控件选项列表
<keygen>     New 定义了表单的密钥对生成器字段
<output>      New 定义一个计算结果

input标签:输入框,其常用属性如下:

name:指定输入框名字,方便提交表格;

value:属性值,文本框内容;

placeholder:可用于文本框默认显示内容;

readonly:只读状态,输入框无法进行文字修改;

disabled:禁用状态;

size:由于输入框是单行的,所以只能设置宽度;

maxlength:限制输入框最大输入的字符个数;

type属性:

text:普通文本,默认属性;

password:文本密码,输入的内容不显示,通常用来设置密码;

submit:提交按钮;

checkbox:复选框,可以进行多项选择;

lable:单选框,多个关联选项name属性保持一致,<labke  for=""></lable>:用于关联单选按钮与文字;

hidden:隐藏字段,不会在页面展示;

下拉框

select:下拉选择框,属性可以设置name,每个选项都有一个option,默认选中使用selected

籍贯:<select name="from">
         <option value="bj">北京</option>
         <option value="sh">上海</option>
         <option value="gz">广州</option>
         <option value="sz">深圳</option>
      </select>

  

文本域

textarea:文本域,可以输入多行文本;

属性:

cols:列数(宽度)

rows:行数(高度)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>form表单</title>
	</head>
	<body>
		<form>
			<!-- 文本框 -->
			用户名:<input type="text" placeholder="请输入您的用户名"/>
			<input type="button" value="请点击"/><br />  
			密码:<input type="password" placeholder="请输入您的密码"/>
			<input type="submit" value="请确认"/>
			<br />
			<input type="hidden" value="隐藏"/>
			<!-- 复选框 -->
			你喜欢什么水果?<br />
			苹果 <input type="checkbox" /><br />
			香蕉 <input type="checkbox" /><br />
			葡萄  <input type="checkbox" /><br />
			<!-- 单选框 -->
			请选择您的性别:
			<input type="radio" name="sex" id="nan" value="0"/ checked="a"><label for="nan">男 </label>
			 <input type="radio" name="sex" id="nv"/><label for="nv">女</label>
			<br />
			<!-- 下拉列表 -->
			请选择你喜欢的科目:
			<select size="1" name="form">
				<option>语文</option>
				<option selected="selected">数学</option>
				<option>英语</option>
			</select>
		</form>
		<!--文本域 -->
		<textarea cols="20" rows="20">请输入内容</textarea>
	</body>
</html>

g

猜你喜欢

转载自www.cnblogs.com/webdelovely/p/11411811.html