表单标签(一)
表单是装载用户填写内容的一个容器,当用户输入内容后点击任意按键提交,表单会将数据发送到服务器进行处理。
比较常见的表单有:
登录注册时输入账号、密码、生日、昵称、手机号和性别等信息。
聊天软件中的输入框,输入文字、表情、图片、连接和语音等等。
外卖快递软件中的创建收货地址,输入地址、选择发货日期、姓名、联系方式。
HTML5中,表单由form标签装载,所有表单在此标签中才能运用。
格式为:<form> </form>
表单标签有两个常用属性:action和method
action指定URL中数据处理数据的脚本,一般是action=“同目录下的处理页面:XXX.html”,如果为空值,则为本页处理。
method则指定数据提交的形式:一种是post,一种是get。
post:
数据将打包为数据块发送到脚本进行处理,不使用请求字符串。
get:
浏览器会创建请求字符串,该字符串包含一个问号和表单内的数据,浏览器会将该请求字符串返回给URL指定的脚本进行处理,但是表单的值就会显示在浏览器地址栏中。
URL(Uniform Resource Locator WWW中的统一资源定位系统)
所以为了信息安全,建议多用post的提交形式。
表单元素 input标签
采用input标签可以添加文本输入框、按键。
input包含的属性:
type:
默认为text(单行文本框),其他还有password(密码输入框,输入内容自动加密为*)、checkbox(复项选择)、radio(单项选择)、submit(提交按键)、reset(重填按键)、file(上传文件)、image(图片提交按键)和button(文字按键,需要另外增加激发事件oneclick)
name:
这是为单元指定的名称,区分元素、类似每个人的姓名。
value:
选用属性,是单元的初始值,类似每个人的个性。如果type为radio,必须选用value。
size:
选用属性,指定单元的默认宽度,假设单元为text或password,则宽度会以字节来计算,其他的则用像素计算。size=“100”
maxlength和minlength:
选用属性,最大输入不超过X和最小输入不少于X,可在text或password中设定,默认为无限大和0。maxlength=“100”
checked
在radio和checkbox中选用此属性,用于设定默认选中的值。checked=“checked”
input代码格式例子,看完应该可以了解表单单元用法:
1
<form method="post" action="">
<p>性 别:
<input name="male" type="radio" value="男性" checked=“checked”>男
<input name="female" type="radio" value="女性">女
</p>
<p>爱 好:
<input name="interest" type="checkbox" value="sing">唱歌 <input name="interest" type="checkbox" value="sport">运动 <input name="interest" type="checkbox" value="painting">绘画 <input name="interest" type="checkbox" value="home">宅
</p>
</form>
效果:
解读:为单项选择利用input做了两个项,分别name为male和female,给予value男性和女性,在选项后方输入文字男和女,前端即可看见男和女两个单选项,用checked来设定male为已经默认选好的。复选框chekbox,利用input做多个选项,唱歌、运动、绘画和宅。
2
<form method="post" action="">
<p>账 号:
<input name="account" type="text" size="40" value="在这里输入..." maxlength="18">
</p>
<p>密 码:
<input name="pass" type="password" size="40" minlength="6">
</p>
</form>
效果:
解读:账号,单行输入框,最大输入18字节宽度40字节,框内默认有值value“在这里输入…”,输入框名称为account。密码,使用password类型,字节宽度40,最少输入6位数。
3
<form method="post" action="">
<p><input name="submit" type="submit" value="提交">
<input name="reset" type="reset" value="重填">
<input name="Botton" type="button" value="警示" onclick="alert(this.value)">
<input name="Botton" type="button" value="无意义">
<input type="image" src="image/login.gif" alt="登录" name="登录"/>
</p>
</form>
效果:
解读:文字按键用value来定前端按键显示名称;
第一个是提交文字按键,点击后表单被提交处理。
第二个是重填,表单输入内容被清除,回到默认状态。
第三个是自己加的空按键,加了一个弹窗值,点击弹出弹窗,弹窗上出现value设定的值“警示”。
第四个也是空按键,没有意义只是可以点击。
第五个是图片提交按键,需要在同目录image下放按键图片,直接调用,必须要有alt属性,用title、width和height来扩展描述,点击提交表单数据。