前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

第6天 | 16天搞定前端,html表单,标签界的杠把子?

如果有人说开发Web系统,从来没用到过HTML标签中的表单标签的话,那他或她,肯定不是在逗你玩,而是他们开发的是静态页面。如果是动态内容的话,表单标签是必须用到的,毕竟它们是标签界的杠把子,表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

6.1 登录窗口

细细想来,现在上什么平台,好像都要登录之后,才可以完成相关的业务操作。上电商平台购物,登录之后才可以付款,付款了才有货收;上自媒体平台,只有登录之后,才可以发文章,发视频。既然登录这么常用,那我就HTML实现一下。

<form>标签用于创建供用户输入的HTML表单,它的action属性绑定后端的业务处理方法(URL);method方法可选get或post。

<input>标签规定了用户可以在其中输入数据的输入字段,type指定输入类型,text为文本,password为密码,可指定的类型还有好多种。name属性指定input的名称,而你输入的值,会被赋给value属性。

<button>按钮标签,常用的类型的有提交用户输入内容的submit,有重置清空表单的reset。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录之后更美</title>
</head>
<body>
<form action="login">
    账号:<input type="text" name="account"/><br/>
    密码:<input type="password" name="pwd"/><br/><br/>
    <button type="submit">
        登录
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

输出结果

6.2 个人信息

好多平台,为了给你推荐个性化的需求,会有一个页面让你填写个人信息,内容常常会有你的爱好、性别、生日什么的。如果你不填写,不友好的平台就不给你跳过。如果遇到这种平台,我一般就直接跳过,不再用,毕竟有些信息是个人隐私,比如老陈搞了10多年IT。

radio单选按钮,属性name的值相同时,多选一,否则都可以选择;

checkbox复习框:可以勾选多个。常用在兴趣等多个类型选择中;

select下拉列表框:在多个预设选项中,选择其中一个;

textarea多行输入框:输入的内容较多时,就用它。rows属性指定行数,cols指定列数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>亮出你的美</title>
</head>
<body>
个人信息登记 <br/> <br/>
<form action="infoSubmit">
    姓名:<input type="text" name="name"/><br/>
    性别:<input type="radio" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female"/>女<br/>
    兴趣:<input type="checkbox" name="p" value="p"/>编程
    <input type="checkbox" name="k" value="k"/>看书
    <input type="checkbox" name="c" value="c"/>看电影
    <input type="checkbox" name="l" value="l"/>看美女
    <br/>
    爱好:
    <select name="love">
        <option value="x">下象棋</option>
        <option value="j">下军旗</option>
        <option value="t">下跳棋</option>
        <option value="w">下围棋</option>
    </select>
    <br/><br/>
    <textarea rows="10" cols="35">个人简介</textarea><br/><br/>
    <button type="submit">
        提交
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

输出结果

好了,有关html表单的内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注今日头条:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。

#前端##程序员##HTML5##表单##数据#

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言