关于HTML的表单

最新推荐文章于 2024-06-29 12:14:53 发布

星汐飞花

最新推荐文章于 2024-06-29 12:14:53 发布

阅读量88

点赞数 1

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_46426843/article/details/104643389

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

关于HTML中的表单

表单由三个元素组成

表单域
表单控件
文本信息

表单域：
表单的所有信息和控件都需要处于表单域中，这样在才可以提交整个表单
表单域的标签为<form></form>
代码如下：

<form>

<form/>

表单控件：
表单控件是表单的主题，标签为<input />而其中有一个必须要填写的属性标签<type>，给它不同的属性可以变成不同的表单控件。

属性名	效果
text	单行文本输入
password	密码输入
radio	单项选择
checkbox	多项选择
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图片式的提交按钮
file	文件域

而除了表格里的标签外，还有几个单独的属性标签也非常重要的

<name>:用来区分不同的控件，需要注意的是，在单项选择和多项选择中，控件名需要保持一致。
<value>:用在文本输入框中，展示一段文字，如在用户名输入框中显示：请输入用户名。
<checked>:用在选择控件中，为默认选中。

文本信息：
文本信息用来提示控件的用途和提示信息，这个自然不用多说。

拓展

表单中还有三个经常用到的控件

下拉列表:

<select>
    <option></option>
    <option></option>
</ select>

文本域：

<textarea rows="单行可输入数量” cols="可输出行数”>

</ textarea>

点击文本选择输入：
这个比较特殊，作用是点击文本就可以选择对应的输入框，写法有两种，一种是直接包含，一种是通过for类似于锚点。标签名为


<label>用户名<input  type="text" value="请输入用户名"></label>

<label for=""name>用户名</label>
<input type="text" value="请输入用户名" id="name">

示例

以一个简单的注册表来展示以上介绍的各个标签，代码如下：

<body>
	<h3 align="center">注册表</h3><dr />
	<form align="center">
           <label>用户名:<input type="text" name="uarename"value="请输入用户名"><br /></label>
           <label for="mm">密码:</label>
	       <input type="password" name="pwd" id="mm"><br />
	性别:男<input type="radio" name="sex" checked="checked">女<input type="radio" name="sex"><br />
	爱好：运动<input type="checkbox" name="ah">
         绘画<input type="checkbox" name="ah">
         看电影<input type="checkbox" name="ah">
         逛街<input type="checkbox" name="ah">
         旅游<input type="checkbox" name="ah" checked="checked"><br />
         所在地区：<select>
         	<option>北京</option>
         	<option>天津</option>
         	<option>河北</option>
         	<option>山东</option>
         </select><br />
             <label>验证码<input type="text" name="yzm" value="请输入验证码"></label>
         <input type="button" name="bt" value="点击获取验证码"><br/>
         <input type="submit" name="tj" value="确认提交">
         <input type="reset" name="cz" value="重新输入"><br/>
         留言板：<br />
         <textarea cols="30" rows="5">
         </textarea><br / >
         <input type="image" name="tp" src="imges/1.png">

	
	</form>

显示效果如下：
效果图

以上就是本文的全部内容了

星汐飞花

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于HTML的表单

关于HTML中的表单表单由三个元素组成表单域表单控件文本信息表单域：表单的所有信息和控件都需要处于表单域中，这样在才可以提交整个表单表单域的标签为<form></form>代码如下：<form><form/>表单控件：表单控件是表单的主题，标签为<input />而其中有一个必须要填写的属性标签...
复制链接

扫一扫