首页>前端教程>HTML教程

HTML第八课:表单

表单的目的是获取用户的信息,然后处理信息并返回给用户结果,比如百度搜索,登录表单,或者保存用户的信息到数据库中,比如注册表单,发表日志,评论别人的文章等。

一、表单的结构

1、必须有表单的标签<form></form>,把所有可以输入信息的控件包含在表单的标签里面。

2、要有用户能够输入或者选择信息的控件。

3、必须有一个提交按钮,把数据发送到服务器端,或返回用户结果,或存放在数据库中。

比如一个最简单的搜索表单的结构如下:

<form name="search" id="search" method="post" action="result.php">
    <input type="text" name="keywords" id="keywords" placeholder="请输入关键字" required>
    <input type="submit" id="btn_submit" name="tijiao" value="搜索">
</form>

首先认识form表单,method代表发送数据的方式,默认是post,还有一种是get,如果是get,表单的数据会显示在地址栏上,成为查询字符串,很不安全。action是表单处理页面,也就是连接数据库,查询关键字,返回用户结果的处理页面,一般是动态程序,比如php,asp.net,asp,jsp等页面。

input是表单的一种控件,可以让用户输入或者选择数据。最核心的是type属性,确定该控件是什么类型的控件,比如是单行文本、单选、多选还是密码等类型。placeholder是html5新增的属性,表示提示信息,required是一种布尔值属性,表示该控件不能为空。

一个表单必须对应一个提交按钮,也就是type="submit"的按钮。这种按钮才具备提交数据,发送数据的能力。按钮还有两种类型,一种是button,一般和javascript结合,完成交互行为,还有一种是reset,重置表单为初始状态,貌似很无用。

type=""这里的type类型里面的值是固定的,比如text表示单行文本,password表示密码类型,radio表示单选按钮,这种值是不能随便乱写的。

而input的id和name表示控件的名字,是可以自己命名的,按照命名规则命就可以了。

控件一般对应到一个label标签,它的目的是当点击label标签的文字时,光标可以放入对应的控件中,可以提高用户体验。比如:

<label for="yanse">颜色:</label>
    <input type="color" name="yanse"  id="yanse" />

如果是用户输入信息的控件,可以不要value属性,但是如果是选择性控件,则要加上value属性,因为传递给服务器的值是value对应的值,而不是你看见的文字。比如:

<p>性别:
    <input type="radio" name="sex"  id="sex1" value="男" />男
    <input type="radio" name="sex"  id="sex2" value="女" />女
</p>

二、控件类型

表单常用控件主要有三种:input(输入)、select(下拉)、textarea(多行文本),只有input具有很多的type类型。

这里罗列出常用的type类型:

type="text"                  /*单行文本*/
type="password"              /*密码类型*/
type="email"                 /*邮件类型*/
type="url"                   /*网址类型*/
type="range"                 /*范围*/
type="date"                  /*利用万年历选择日期*/
type="time"                  /*时间*/
type="week"                  /*周数和日期*/
type="datetime-local"        /*本地日期时间*/
type="number"                /*数量*/
type="color"                 /*颜色*/
type="radio"                 /*单选*/
type="checkbox"              /*复选*/
type="file"                  /*文件域,选择本地文件*/
type="image"                 /*图像域,可以用一张图片代替提交按钮*/

其次,select表示下拉菜单,比如:

<select name="address">
    <option value="四川">四川</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="深圳">深圳</option>
</select>

select必须和option组合在一起,option代表的是下拉菜单的选项。

最后,是多行文本,比如用来简单评论的多行文本框。

<p><label for="info">简介:</label>
    <textarea name="info" cols="50" rows="5" id="info" placeholder="请输入个人简介"></textarea>
</p>

具体效果可以查看案例

点赞


13
保存到:

相关文章

Top