[学习笔记] 静态网页开发基础之表单

# 学习 # · 2020-04-12

表单概述

1、表单:表单就是一个将用户信息组织起来的容器。将需要用户填写的内容防止在表单容器中,当用户单击“提交”按钮的时候,表单会将数据统一发送给服务器。

2、表单的内容:创建表单后,就可以在表单中放置控件以接收用户的输入。这些控件通常放在<form>...</form>标签对之间,也可以在表单之外用来创建用户界面。

<form name="form1" method="get" action="result.html">

</form>

3、表单标签及其表单属性:

(1)action:此属性指示服务器上处理表单输出的程序。若为空,则默认提交到本页。

(2)method:此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法。method=(get|post)

(3)post和get的区别:post方法提交方式不会改变地址栏状态,表单数据不会被显示。使用get方法提交方式,地址栏状态会发生变化,表单数据会在URL信息中显示。

4、表单元素及其格式:装载数据的控件就称为表单元素。向表单中添加表单元素要用<input>标签。

(1)type:指定表单元素的类型,默认为text。

(2)name:指定表单元素的名称。

(3)value:是可选属性,指定表单元素的初始值。

(4)size:指定表单元素的出事宽度。若为text或password类型,则表单元素的大小以字符为单位,否则以像素为单位。

(5)maxlength:指定可在text或password元素中输入的最大字符数。

(6)checked:指定按钮是否被选中,当输入类型为radio或checkbox时,使用此属性。

5、常用的表单类型:

(1)文本框:

<!--
size:用于指定文本框的长度
maxlength:用于指定文本框输入的数据长度。
-->
名字:<input type="text" value="" name="fname" size="22" maxlength="10"/>

(2)密码框:密码框仅仅是周围的人看不见输入的符号,不能保证输入的数据安全。

密码:<input name="pass" type="password" size="22"/>

(3)单选按钮:用于一组相互排斥的值,组中的每个单选按钮控件应具有相同的名称,用户一次只能选一个单选按钮。

性别:<input name="gen" type="radio" class="input" value="男" checked/>男
<input name="gen" type="radio" value="女" class="input"/>女

(4)复选框:一旦用户选中了某个复选框,在表单提交时,会将该复选框的name值和对应的value值一起提交。通常情况下,如果选项之间是并列关系,就需要设置为相同的名称,以便能够同时获取,否则,每个选项都需要单独进行读取,从而降低了效率。

爱好:<input type="checkbox" name="interest" value="sports" checked />运动
<input type="checkbox" name="interest" value="talk"/> 聊天
<input type="checkbox" name="interest" value="play"/> 玩游戏

(5)列表框:<select>标签用于显示可供用户选择的列表框,每个列表框由一个<option>标签表示,<select>标签必须至少包含一个<option>标签。selected属性表示该选项在默认情况下是被选中的,而且一个列表框中只能有一个列表项默认被选中。默认selected为true。

出生日期:
<input name="byear" value="yyyy" size="4" maxlength="4"/> 年
<select name="bmon">
    <option value="">[选择月份]</option>
    <option value="1">一月</option>
    <option value="2">二月</option>
    <option value="3">三月</option>
    <option value="4">四月</option>
    <option value="5">五月</option>
    <option value="6">六月</option>
    <option value="7">七月</option>
    <option value="8">八月</option>
    <option value="9">九月</option>
    <option value="10" selected>十月</option>
    <option value="11">十一月</option>
    <option value="12">十二月</option>
</select> 月
<input name="bday" value="dd" size="2" maxlength="2" /> 日

(6)按钮:HTML5中按钮分为三种:普通按钮(button),提交按钮(submit),重置按钮(reset)。name用来给按钮命名,value用来设置显示在按钮上的文字。

<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮"/>
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮"/>
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮" onclick="alert(this.value)"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />

(7)多行文本域:

< textarea name="textarea" cols="显示的列数" rows="显示的行数" >
    文本内容
< /textarea >

(8)文件域:用于实现文件的选择,在应用是只需把type属性设置为file即可,在实际应用中常用于文件上传的操作。

<form action="" method="post" enctype="multipart/form-data"><!--表示将表单数据分为多部分提交-->
    <input type="file" name="files"/><br/>
    <input type="submit" name="upload" value="上传"/>
</form>

(9)邮箱:email在提交表单时会自动验证email文本框的值。

邮箱:<input type="email" name="eamil"/>

(10)网址:

请输入你的网址:<input type="url" name="userUrl"/>

(11)数字:number类型的input元素提供用于输入数字的文本框。输入的数得是step(规定合法的数字间隔)值的倍数。

<input type="number" name="num" min="0" max="100" step="10"/>

(12)滑块:range类型的input元素提供用于输入包含一定范围内的数字值的文本框。不支持的浏览器会显示普通的纯文本框,就当作text来处理。

请输入数字:<input type="range" name="range1" min="0" max="10" step="1"/>

(13)搜索框:search类型提供的搜索框是任意页面的一个搜索框。

请输入搜索的关键词:<input type="search" name="sousuo" />

表单的高级应用

1、设置表单的隐藏域:

<input type="hidden" value="666" name="userid"/>

2、设置表单的只读与禁用:

<input name="name" type="text" value="张三" readonly>

3、表单元素的标注:目的是增强鼠标的可用性。

<label for="表单元素的id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

表单的初级验证

1、表单验证的好处:

(1)减轻服务器的压力。

(2)保证数据的可行性和安全性。

2、表单初级验证的方法:

(1)placeholder:为input类型的文本框提供一种提示(hint),描述文本框期待用户输入何种内容。

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

(2)required:规定文本框填写内容不能为空,否则不允许用户提交表单。

<input type="text" name="username"  required/>

(3)pattern:验证input类型文本框中用户输入的内容是否与自定义的正则表达式想匹配。

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />   *以13、15、18开头的11位数字
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/257/

评论