目 录CONTENT

文章目录

表单标签

Administrator
2020-07-24 / 0 评论 / 1 点赞 / 6071 阅读 / 6445 字

表单标签

表单标签是网页与用户进行进行交流的一个东西,它里面有很多种类型的标签,一般情况下,所有的表单标签都会放在<form>这个标签里面

文本输入框

姓名:<input type="text" placeholder="请输入姓名" />

placeholder属性是占位符信息

密码输入框

密码:<input type="password" placeholder="请输入密码" />

密码输入框里面输入的内容是不可见的

数字输入框

年龄:<input type="number" max="40" min="18" step="3" />
  • max属性代表最大值
  • min属性代表最小值
  • step属性代表每次变量的量

日期输入框

日期:<input type="date">

时间输入框

时间:<input type="time" />

日期时间输入框

日期时间:<input type="datetime-local" />

颜色选择框

颜色:<input type="color">

它会在页面上面生成一个带颜色的按钮,点击按钮以后可以选择颜色

滑块

滑块:<input type="range" max="100" min="0" step="10"/>

max属性设置大最值,min属性设置最小值,step属性设置每次变化量

文件选择

附件:<input type="file" multiple accept="image/*" />
  1. multiple属性用于设置多选文件
  2. accept用于设置选择文件的类型,image/*代表图片类型文件

单选框

性别:
<label>
    <input type="radio" name="sex" >男
</label>
<label>
    <input type="radio" name="sex" checked>女
</label>
  1. 多个单选标签如果要构成一组,并需要设置相同的name属性值
  2. label标签可以和单选标签结合在一起使用,这样文字就和单选标签组合在了一起
  3. checked属性代表当前元素默认选中

复选框

复选框也就是多选框

爱好:
<label><input type="checkbox" checked name="hobby">看书</label>     
<label><input type="checkbox" name="hobby">睡觉</label>
<label><input type="checkbox" name="hobby">玩游戏</label>
<label><input type="checkbox" checked name="hobby">打牌</label>
<label><input type="checkbox" name="hobby">逛街</label>

复选框与单选框的用法非常相似

下拉选择框

籍贯: 
<select multiple size="9">
    <optgroup label="南方">
        <option>湖北省</option>
        <option>广东省</option>
        <option>福建省</option>
        <option selected>广西省</option>
    </optgroup>
    <optgroup label="北方">
        <option>河北省</option>
        <option>黑龙江省</option>
        <option>内蒙古省</option>
        <option>吉林省</option>
    </optgroup>
</select>
  1. select标签与option标签结合在一起使用
  2. optgroup标签可以将多个选项进行分组,label属性用于设置分组的名称
  3. selected属性用于默认选中某个选项
  4. multiple属性用于设置多选
  5. size属性用于设置展示的option的个数

文本域

文本域:
<textarea placeholder="请输入内容" rows="8" cols="40"></textarea>
  1. textarea的开始标签与结束标签最好不要换行
  2. rows属性用于设置高度,cols用于设置宽度

按钮标签

网页当中的按钮实例方式有很多种,我们可以通过input标签去实现,也可以通过button标签去实现,在这个章节,我们讲解input的按钮

input的按钮它有4种常见的类型

普通按钮

<input type="button" value="我是普通按钮">

value属性用于设置按钮里面的内容

重置按钮

这种按钮是具备一定的功能的,它可以将当前form表单里面的所有表单元素的值重置为默认值

<input type="reset" value="我要重置">

重置按钮的显示默认值是“重置”,我们也可以通过value属性去设置按钮的显示名称

提交按钮

这种按钮也具备定的功能,它可以将当前form表单里面的内容提交到后台服务器,因为目前没有后台服务器,此处先不做演示

<input type="submit" value="确定注册">

提交按钮的默认显示值是“提交”,我们也可以通过value属性去设置按钮的显示名称

图片按钮

<input type="image" src="img/icon.png">

按钮图片有一个特点,在提交信息给服务器的时候它会将点击的坐标提交给服务器

上面的四种按钮虽然可以形成按钮,但是在后面使用这种情况下的按钮非常少,因为这种按钮有一个非常大的缺点,它是单标签

按钮标签2

之前的单标签按钮有很大的缺点,所以现在我们有一个button,它也可以生成我们需要的按钮

<button type="button">
    <b>这是一个双标签的按钮</b>
</button>
<button type="reset">
    <font color="red" size="5">这是一个font的双标签</font>
</button>
<button type="submit">
    <marquee>这是 一个目标滚动的</marquee>
</button>

它的type属性与上面的单标签按钮的用法是保持一致的


表单属性

在表单标签里面,还有很多很多的通用属性,现列举如下

  1. placeholder占位符属性,当内容为空的时候的提示信息
  2. value属性,所有表单元素都会有属性,它设置表单元素的值
  3. readonly属性,设置表单元素只读
  4. disabled属性,禁用某一个表单元素
  5. autofocus属性,设置某一个表单元素自动获取焦点
  6. required属性,设置某一个元素必填(在submit提交表单之前会检测这个地方的表单元素是否有值)
1

评论区