表单作用
HTML中的表单(form)是网页中最常用的组件,是网站服务器端与客户
端之间沟通的桥梁。表单在网上随处可见,它们被用于在登录页面输
入用户名和密码,对博客进行评论等。
举个栗子:
form(表单)
1.作用:
用于接受用户的数据并且提交给服务器
表单二要素:
1.form元素。不是from!!!
表单,用于手机用户信息并提交给服务器
2.表单控件,
提供了能够与用户交互的可视化组件。
2.form元素
1.作用
用于手机用户信息并提交给服务器
form元素在网页中是不可见的,不能忽略
2.语法
1.标记
< form> < /form>
2.属性
1.action
指定处理程序的地址,默认提交给本页
2.method
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
1.GET(默认方法):如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。当您使用 GET 时,表单数据在页面地址栏中是可见的。GET 最适合少量数据的提交。浏览器会设定容量限制。
2.如果表单正在更新数据,或者包含敏感信息(例如密码)。POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
表单:
<form action="">
姓名:<br />
<input type="text" value="">
<br />
性别:<br />
<input type="text" name="lastname" value="">
<br />
<input type="submit" value="提交">
</form>
表单控件的详解:
1.文本框 and 密码框 ( 括号内的是解释说明,用时删掉)
文本框<input type="text">
<input type="text"(文本框) name="userName"(文本框名称) value="" size="30"(文本框长度) maxlength="18"(文本框可输入最多字符) />
密码框<input type="password">
<input type="password "(密码框) name="pass"(密码框的名称) size="18"(密码框的长度) />
属性:
1.name:定义控件名称
提交给服务器使用,如果没有name的话则无法提交
2.value: 值
要提交服务器的值,同时也是默认能够显示在控件上的值。
3.maxlength
限制输入的最大字符数
4.placeholder
占位符
用户在未输入任何数据的时候显示的内容
2.按钮(直接使用)
1.提交按钮:<input type="submit" >
将表单数据提交给服务器。
2.重置按钮:<input type="reset">
将表单内容恢复到初始化页面
3.普通按钮:<input type="button">
允许通过JS自定义功能
属性:
value:按钮上显示的文本
4.<button>
内容</button>
属性:type
取值:submit / reset / button
3.单选按钮 和 复选按钮
单选按钮:<input type="radio">
<input name="gen" type="radio"(单选按钮框) value="1" />1
<input name="gen" type="radio" value="2" />2
复选按钮:<input type="checkbox">
<input type="checkbox"(复选框) name="interest" value="sports"(值)/>上厕所
<input type="checkbox" name="interest" value="talk" checked(预选中选中状态 ) />吃饭
<input type="checkbox" name="interest" value="play"/>睡觉
属性:
1.name:
定义控件名称,除了定义名称之外,还起到分组的作用
一组中的单选按钮或者复选按钮名称必须一致。
2.value:
值,尽量提前声明
3.checked
设置预选中,该属性无值。
4.隐藏域 和 文件选择框
1,隐藏域
作用:想提交给服务器但不想给用户看的数据
可以放在隐藏域中
语法:
<input type="hidden">
属性:
name: 定义控件的名称
value: 定义控件的值
2. 文件选择框
作用:文件上传时使用
标记:<input type="file">
属性:
name:定义控件名称
5.多行文本域
标记:<textarea></textarea>
<textarea rows="10" cols="30">我是一个文本框。</textarea>
属性:
1.name:控件名称
2.cols:指定文本域默认显示的列数
3.rows:指定文本域默认显示的行数
6.下拉选择框(下拉列表)
<select name="" id="">
<option value="值">显示数据</option>
<option value="值">显示数据</option>
<option value="值">显示数据</option>
</select>
7.只读和禁止
<input name="name" type="text" value="222" readonly (只读文本框)>
<input type="submit " disabled (禁用) value="111" >
8.选择数字框
请输入年龄:<input type="number"(数字) name="" min="0"(允许的最小值) max="1000"(允许的最大值) step(数字间隔)="1"/>
<input type="submit"/>
9.搜索框
请输入搜索内容:<input type="search"(搜索框) name=""/>