HTML表单元素总结

最新推荐文章于 2022-09-11 19:32:33 发布

原创最新推荐文章于 2022-09-11 19:32:33 发布 · 423 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

表单元素专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML中的表单元素，包括text、password、radio、checkbox、reset、submit、button、image和file等类型，以及列表框select和多行文本域textarea的使用方法。讲解了各元素的属性如type、name、value、size等，并举例说明了如何创建和配置这些表单元素，为网页交互提供基础。

1.表单语法：

表单元素格式：
在这里插入图片描述
type的类型有：text，文本类型，文本框；

  <input type="text" name="fname"  size="20" />

password 密码类型，密码框

<input type="password" name="" size="15" />

radio 单选框，单选按钮：注意这里面要求input元素的名称要一致，不然会出现错误，checked 表示默认；

    <p>性别：<input type="radio" size="20" name="sex" checked>男
	<input type="radio" size="20" name="sex" >女</p>

在这里插入图片描述

checkbox 复选框，复选按钮；同样要求name一致；

<p>爱好：<input type="checkbox" name="like">篮球
		<input type="checkbox" name="like">游戏
		<input type="checkbox" name="like">看书
		<input type="checkbox" name="like">游泳
		</p>

在这里插入图片描述

reset;表单重置按钮，要在表单中间，即在form范围内；

      <p> <input type="reset" value="重置"></p>

sumbit:提交按钮；通过form的action,确定将表单提交到什么地方；

  <p> <input type="submit" value="提交"></p>

button 定义一个按钮，可以返回一些信息

      <input type="button" onclick="alert('请填写完整')" value="Click Me!"/>

image；点击图片可以按照form的action提交信息；这里的image相当于一个提交按钮；

 <input  type="image" src="../../img/renren.gif" />

上传照片：上传文件；

		<input type="file" name="picture"/>

在这里插入图片描述

hidden;隐藏域；
在这里插入图片描述
还有只读和禁用：直接在属性里面添加即可

在这里插入图片描述

表单元素中：

      type： 表示input元素的类型；其基本类型就是以上总结的；
      name:表示input元素的名称
      value；表示input元素的值
      size:表示表单元素的初始宽度
      maxlength:表示输入的最大字符数
      checked：当type为radio或者checked的时候，指定按钮是否被选中；

除了以上的几种表单形式外，还有列表框和多行文本域：

列表框select和option，下拉列表框：

        <p>出生日期：
		<select name="year">
			<option value="" >2000</option>
			<option value=""  selected="">2001</option>
			<option value="" >2002</option>
			<option value="">2003</option>
			<option value="" >2004</option>年
		</select>
		<select name="mouth">
			<option value="" >6</option>
			<option value=""  selected="">7</option>
			<option value="" >8</option>
			<option value="">9</option>
			<option value="" >10</option>月
		</select>
		<select name="day">
			<option value="" >12</option>
			<option value=""  selected="">13</option>
			<option value="" >14</option>
			<option value="">16</option>
			<option value="" >15</option>日
		</select>
		</p>

在这里插入图片描述

多行文本域，textarea：会显示空白文本区域；

     自我介绍：
	<p>	<textarea rows="1" cols="10">
		</textarea></p>

在这里插入图片描述