如果有人说开发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和嵌入式方面的干货。关注我,没错的。