登录后台

页面导航

2021年11月20日


P45内容

<input>表单元素——type属性的属性值及其描述如下:

属性值描述
button定义可点击的按钮(多数情况下,用于通过JS启动脚本)
checkbox定义复选框
file定义输入字段和浏览按钮,供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段,该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮,重置按钮会清除表单中的所有数据
submit定义提交按钮,提交按钮会把表单里的数据发送给服务器
text定义单行输入字段,用户可以在这里输入文本。默认宽度为20个字符

P46内容、P47内容

<input>表单元素——除type属性外,<input>标签还有很多其他属性,常用属性如下:

属性属性值描述
name由用户自定义定义input元素的名称
value由用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符的最大长度

P48内容、P49内容、P50内容

  1. 有些表单元素想刚打开页面就默认显示几个文字怎么做?

答:可以用value属性="值"

<input type="text" value="请输入用户名"/>
  1. 页面中表单元素很多,如何区别不同的表单元素?

答:name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单。页面中表单很多,name的主要作用就是用于区别不同的表单。

<input type="text" value="请输入用户名" name="username"/>
- name属性后面的值,是自定义的
- radio(或者checkbox)如果是一组,我们必须给他们命名相同的名字
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
  1. 如果页面一打开就让某个单选按钮或者复选框是选中状态?

答:checked属性:表示默认选中状态。用于单选按钮的复选按钮。

性别:
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女
  1. 如何让input表单元素展示不同的形态?比如单选按钮或者文本框

答:type属性:type属性可以让input表单元素设置不同的形态

<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="text" value="请输入用户名">

P51内容

<label>标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元素,当点击<label>标签内文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

语法:

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心:<label>标签的for属性,应当与相关元素的id属性相同


P52内容

在表单域中,可以定义各种表单元素,这些表单元素就时允许用户在表单中输入或者选择的内容控件。

  • selecr表单元素

在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用select标签控件定义下拉列表.

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ......
</select>
  1. select中至少包含一对option
  2. 在option中定义selected="selected"时,当前项即为默认选项中

P53页

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单,此时我们可以使用textarea标签。

在表单元素中,textarea标签是定义域多行文本输入的控件。

使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

语法:

<textarea row="3" cols="20">
文本内容
</textarea>
  1. 通过textarea标签可以轻松的创建更多行文本输入框。
  2. cols="每行中的字符数",rows="显示的行数",我们在实际应用中并不会使用,都是用CSS来改变大小。

P54页

  1. 表单元素学习了三大组:

    1. input输入表单元素
    2. select下拉表单元素
    3. textarea文本域表单元素
  2. 这三组表单元素,都应该包含在from表单域里面,并且有name属性

    <from>
        <input type="text" name="username">
        <select name="jiguan">
            <option>北京</option>
        </select>
        <textarea name="message"></textarea>
    </from>
  3. 有三个名字非常相似的标签:

    1. 表单域 from 使用场景:提交区域内表单元素给后台服务器
    2. 文件域 file 是input type属性 使用场景:上传文件
    3. 文本域 textarea 使用场景:可以输入多行文字,比如留言板,网站介绍等......

P55页内容

注册页面案例,需要实践操作