分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

前端开发:HTML-表单

发布时间:2023-09-06 02:07责任编辑:彭小芳关键词:HTML前端开发前端

 

HTML 表单

表单是一个包含表单元素的区域。

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

表单使用表单标签 <form> 来设置:

<form>.input 元素.</form>

  

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form> ???用户名:<input type="text" name="用户名"><br></form>

  

密码字段:

密码字段通过标签<input type="password"> 来定义:

显示效果

单选按钮(Radio Buttons)

<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女<br>

  

复选按钮(Checkboxes)

 <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

 ??<p> ???????爱好: ???????<input type="checkbox" name="chkhobby" value="篮球">打篮球 ???????<input type="checkbox" name="chkhobby" value="跑步">跑马拉松 ???????<input type="checkbox" name="chkhobby" value="乒乓球">打乒乓球<br> ???</p>

  

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="www.baidu.com" method="get">
 ??<p> ???????<input type="submit" name="btnsbt" value="提交"> ???????<input type="reset" name="btnrst" value="重置"> ???????<input type="button" name="btnbtn" value="普通按钮"> ???</p>

其它实例:

简单的下拉框:

 <!---简单的下拉框--> ???<p> ???????<select name="sel"> ???????????<option value="深圳">深圳</option> ???????????<option value="湖南">湖南</option> ???????????<option value="上海">上海</option> ???????????<option value="北京">北京</option> ???????</select> ???</p>

  

默认选择框:

 ?<p> ???????<select name="sel"> ???????????<option value="深圳">深圳</option> ???????????<option value="湖南" selected>湖南</option> ???????????<option value="上海">上海</option> ???????????<option value="北京">北京</option> ???????</select> ???</p>

  

文本域(Textarea)

 ?<textarea rows="10" cols="30"> ???????我是一个文本框 ???</textarea>

  

带边框的表单

 ?<fieldset> ???????<legend>用户注册信息:</legend> ???用户名:<input type="text" name="用户名"><br> ???密 ?码:<input type="password" name="密码"><br> ???<!--单选框--> ???<p> ???????用户性别: ???????<input type="radio" name="sex" value="男">男 ???????<input type="radio" name="sex" value="女">女<br> ???</p> ???<!---多选框--> ???<p> ???????爱好: ???????<input type="checkbox" name="chkhobby" value="篮球">打篮球 ???????<input type="checkbox" name="chkhobby" value="跑步">跑马拉松 ???????<input type="checkbox" name="chkhobby" value="乒乓球">打乒乓球<br> ???</p> ???<!--按钮--> ???<p> ???????<input type="submit" name="btnsbt" value="提交"> ???????<input type="reset" name="btnrst" value="重置"> ???????<input type="button" name="btnbtn" value="普通按钮"> ???</p> ???</fieldset>

  

发送电子邮件:

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> ???用户名:<input type="text" name="用户名" value="输入用户名"><br> ???E-mail:<input type="text" name="mail" value="邮箱地址"><br> ???内容:<input type="text" name="内容" value="输入邮件内容"><br> ???<input type="submit" value="发送"> ???<input type="reset" value="重置"></form>

  

上传文件:

 <p> ???????<input type="file" name="txtfile"> ???</p>

  

HTML 表单标签

  

前端开发:HTML-表单

原文地址:https://www.cnblogs.com/mike-liu/p/9390161.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved