文章目录
一.表单概念
表单在网页中主要负责数据采集功能。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理。
在某些应用登录上,使用表单,来输入相对信息,用于收集其信息,或者判断其有不有相对应的号等等。
二.表单常见元素
- 文本框(适用于QQ中的用户名框,输入姓名等等,在程序将是控制台输入用户信息 ):
<input type=“text” value=“值” >
- 密码框(字面意思,专门输入密码的,密码是敏感的,所以输入的密码它会自动的将文本显示为圆点。):
<input type="password" value="值">
- email框(输入电子邮件号的框,在表单中有时会需要邮件号,来进行登录或者了解,而邮箱号必须要输入邮箱格式的,它会自动识别所输入的文本是否是邮箱格式的。):
<input type="email" value="值">
- 数字输入框(只能输入数字的框,比如在验证码输入上,用户将需要输入数字的验证码。):
<input type="number" value="值">
- 手机号输入框(输入手机号,):
<input type="tel" value="值">
- url框(输入网页路径,此是用来收集用户输入的网页链接):
<input type="url" value="值">
- 文件框(用于用户选择于电脑中的文件,或者图片。):
<input type="file" value="值">
- 滑块(在表单是可以被用户拖动滑块来选择,比如在用户登录时,要图对整图片,所要用滑块来滑动对整。):
<input type="range" value="值">
- 搜索框(适用于搜索,用户在输入的搜索框中,来搜索所要指定的东西等等。):
<input type="search" value="值">
- 单选按钮(适用于表单中的性别选择):
<input type="radio" value="值">
- 复选框(适用于表单中选择爱好,可以用户多个选择。):
<input type="checkbox" value="值">
- 下拉框(适用于表单的地址选择,用于用户选择地址或者商店等等。):
<select name="" id="" >
<option value="值"></option>
</select>
- 文本域(可以输入多行文本,比如用于收集用户的建议):
<textarea value="值">
- 提交(按钮提交,用于提交信息):
<input type="submit" value="提交">
- 重置(按钮重置,清空表单中所有框中的文本等):
<input type="reset" value="重置">
- 按钮(用于点击等操作):
<input type="button" value="值">
表单的以上所有表单元素的效果图:
三. 表单元素的常见属性
2.1 maxlength=“最大长度”
<form action="">
<input type="text" maxlength="10"> <!--设置最大长度后,其文本输入的最大长度只能为指定的长度-->
</form>
2.2 minlength=“最小长度”
<form action="">
<input type="text" minlength="6"> <!--设置最小长度后,其文本输入的长度起码都要大于设置的长度-->
<input type="submit">
</form>
运行结果:
2.3 placeholder=“输入框提示语”
<form action="">
<input type="text" placeholder="请输入你的姓名">
<input type="submit">
</form>
运行结果:
2.4 pattern=“正则表达式”
<form action="">
<input type="text" pattern="^[1-9]{6}"><!--这是我设置的正则,需要是数字并且长度要为6-->
<input type="submit">
</form>
运行结果:
这是未达成我设置的格式的效果,而达成我设置的格式的将会提交上去。
2.5 readonly=“只读”
<form action="">
<input type="text" readonly=""><!--设置为只读,将只能看,而不能输入-->
<input type="submit">
</form>
运行结果:
而反之没有设置只读的运行结果为:
(这个31为我自己输入的)
2.6 disabled=“禁用”
<form action="">
<input type="text" >
<input type="submit" disabled><!--设置为禁用,点击此按钮则无效-->
</form>
2.7 required=“输入框必填”
<form action="">
<input type="text" required><!--设置了必填,那此输入框就必须要输入-->
<input type="submit" >
</form>
运行结果:
表单中的所有控件都可以用以上的常见属性。反正在使用时,有相对的要求的话,就直接使用就对了。