HTML表单元素总结

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>

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值