HTML2

博主： Xherlock
发布时间：2021 年 09 月 18 日
563 次浏览
暂无评论
3187字数
分类： Web前端

# HTML（二）

## 思维导图

![HTML(二).png][1]

## form标签

## 表单控件

### input

| 属性      | 说明                                       |
| ----------- | -------------------------------------------- |
| type      | 指定元素类型                               |
| name      | 指定表单名称                               |
| value     | 元素初始值                                 |
| size      | 表单元素初始宽度                           |
| maxlength | type：text/password时，输入的最大字符数    |
| checked   | type：radio/checkbox时，指定按钮是否被选中 |

### 表单元素

* text：文本框

~~~html
  <input type="text" name="姓名" maxlength="20" placeholder="请输入姓名">
  ~~~
* password：密码框

~~~html
  <input type="password" name="密码" maxlength="20" placeholder="请输入密码">
  ~~~
* radio：单选按钮

~~~html
  <input type="radio" name="性别" value="男">男性
  <input type="radio" name="性别" value="女">女性
  ~~~
* checkbox：复选框

~~~html
  <input type="checkbox" name="爱好" value="CTF" checked>CTF
  <input type="checkbox" name="爱好" value="前端开发">前端开发
  <input type="checkbox" name="爱好" value="挖洞">挖洞
  <input type="checkbox" name="爱好" value="渗透">渗透
  <input type="checkbox" name="爱好" value="逆向">逆向
  <input type="checkbox" name="爱好" value="Web程序设计">Web程序设计
  ~~~
* select：列表框

~~~html
  <select name="grade">
      <option value="2021" name="年级">2021</option>
      <option value="2020" name="年级" selected>2020</option>
      <option value="2019" name="年级">2019</option>
      <option value="2018" name="年级">2018</option>
  </select>
  ~~~
* button：按钮

~~~html
  
  <input type="reset" (重置按钮) name="butReset"  value="reset">
  <input type="submit"(提交按钮) name="butSubmit" value="submit">
  <input type="button"(普通按钮) name="butButton" value="button"/>
  ~~~
* textarea：多行文本域

~~~html
  <textarea name="个人描述" maxlength="100" placeholder="请用不多于100字描述你自己" rows="5" cols="20"></textarea>
  ~~~
* file：文件域

~~~html
  <input type="file" name="简历">
  ~~~
* image：图像

~~~html
  
  <input type="image" src="图片路径">
  ~~~
* email：邮箱

~~~html
  <input type="email" name="email"/>
  ~~~
* url：网址

~~~html
  <input type="url"（网址）  name="userUrl"/>
  ~~~
* number：数字

~~~html
  <input type="number" name="num" min="0" max="100" step="10"/>
  ~~~
* range：滑块

~~~html
  <input type="range" name="range1" min="0" max="10" step="2"/>
  ~~~
* search：搜索框

~~~html
  <input type="search" name="sousuo"/>
  ~~~
* data：日期

~~~html
  <input type="date" name="depart"/><br/>
  <input type="date" name="arrival"/><br/>
  ~~~

![image-20210918141223593.png][2]

* fieldset+label：组合组件

* 如果一个表单上有很多信息需要填写，可以使用 fieldset控件将相关的元素组合在一起，使表单更容易理解。表单越容易理解，访问者就越有可能正确地填写表单。
  * 为了识别每个 fieldset控件的作用，还可以使用 legend元素为每个 fieldset控件提供一个标题（caption），用于描述每个组的目的。legend元素是 fieldset元素的第一个子元素。

~~~html
  <fieldset>
     <legend>基本信息</legend>
     <p><label>用 户 名：</label><input type="text" name="username" /></p>
     <p><label>密　　码：</label><input type="password" name="pass1" /></p>
     <p><label>确认密码：</label><input type="password" name="pass2" /></p>
     <p><label>　E-Mail：</label><input type="email" name="email" /></p>
  </fieldset>
  ~~~

![image-20210918142415816.png][3]

* 只读与禁用

~~~html
  <input name="name" type="text" value="张三"  readonly>
  <input type="submit" disabled value="保存" >
  ~~~

### 标签控件\<label>

将label和input相关联优点：

* 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
* 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

两者匹配起来时，input的id属性和label的for属性值相同

~~~html
<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>
~~~

也可以直接将input放在label中，此时就不需要for和id属性，因为关联已隐含存在

~~~html
<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>
~~~

### 表单常用属性

1. placeholder

input类型的文本框提供一种提示（hint）

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email和password等类型
2. required

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
3. pattern

用户输入的内容必须符合正则表达式所致规则，否则 不能提交表单

~~~html
   <input type="text" name="tel" required pattern="正则表达式" />
   ~~~

## HTML5组件

### 音频

audio

### 视频

video

### 弹幕

Marquee

**文字运动的行为：**

behavior：scroll(默认)、slide、alternate

**文字运动的方向：**

direction: up、left、right、down

**文字滚动的次数：**

loop: -1 表示无限滚动

height、width:设定文字滚动的范围

[1]: http://120.78.215.15/usr/uploads/2021/09/1323997479.png
[2]: http://120.78.215.15/usr/uploads/2021/09/3401711157.png
[3]: http://120.78.215.15/usr/uploads/2021/09/852923244.png

最后修改：2021 年 11 月 13 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Reverse（十一）
浏览次数: 2629
Win11新机鼓捣记录
浏览次数: 2382
栈~数制转换
浏览次数: 1604
C++学习
浏览次数: 1603
Python实现文件管理系统（重命名和删除）
浏览次数: 1575

顶点软件
你写得非常清晰明了，让我很容易理解你的观点。
mars
博主你好，请问怎么知道的alloc函数属于Buffer下的方法...
lj
该评论仅登录用户及评论双方可见
Mr.Guan
:@(赞一个)
Typecho
欢迎加入 Typecho 大家族

HTML2

Xherlock • 2021 年 09 月 18 日

# HTML（二）

## 思维导图

![HTML(二).png][1]

## form标签

## 表单控件

### input

### 表单元素

* text：文本框

~~~html
  <input type="text" name="姓名" maxlength="20" placeholder="请输入姓名">
  ~~~
* password：密码框

~~~html
  <input type="password" name="密码" maxlength="20" placeholder="请输入密码">
  ~~~
* radio：单选按钮

~~~html
  <input type="radio" name="性别" value="男">男性
  <input type="radio" name="性别" value="女">女性
  ~~~
* checkbox：复选框

~~~html
  <textarea name="个人描述" maxlength="100" placeholder="请用不多于100字描述你自己" rows="5" cols="20"></textarea>
  ~~~
* file：文件域

~~~html
  <input type="file" name="简历">
  ~~~
* image：图像

~~~html
  
  <input type="image" src="图片路径">
  ~~~
* email：邮箱

~~~html
  <input type="email" name="email"/>
  ~~~
* url：网址

~~~html
  <input type="url"（网址）  name="userUrl"/>
  ~~~
* number：数字

~~~html
  <input type="number" name="num" min="0" max="100" step="10"/>
  ~~~
* range：滑块

~~~html
  <input type="range" name="range1" min="0" max="10" step="2"/>
  ~~~
* search：搜索框

~~~html
  <input type="search" name="sousuo"/>
  ~~~
* data：日期

~~~html
  <input type="date" name="depart"/><br/>
  <input type="date" name="arrival"/><br/>
  ~~~

![image-20210918141223593.png][2]

* fieldset+label：组合组件

![image-20210918142415816.png][3]

* 只读与禁用

~~~html
  <input name="name" type="text" value="张三"  readonly>
  <input type="submit" disabled value="保存" >
  ~~~

### 标签控件\<label>

将label和input相关联优点：

两者匹配起来时，input的id属性和label的for属性值相同

~~~html
<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>
~~~

也可以直接将input放在label中，此时就不需要for和id属性，因为关联已隐含存在

~~~html
<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>
~~~

### 表单常用属性

1. placeholder

input类型的文本框提供一种提示（hint）

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email和password等类型
2. required

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
3. pattern

用户输入的内容必须符合正则表达式所致规则，否则 不能提交表单

~~~html
   <input type="text" name="tel" required pattern="正则表达式" />
   ~~~

## HTML5组件

### 音频

audio

### 视频

video

### 弹幕

Marquee

**文字运动的行为：**

behavior：scroll(默认)、slide、alternate

**文字运动的方向：**

direction: up、left、right、down

**文字滚动的次数：**

loop: -1 表示无限滚动

height、width:设定文字滚动的范围

[1]: http://120.78.215.15/usr/uploads/2021/09/1323997479.png
[2]: http://120.78.215.15/usr/uploads/2021/09/3401711157.png
[3]: http://120.78.215.15/usr/uploads/2021/09/852923244.png

HTML2

发表评论取消回复

Reverse（十一）

Win11新机鼓捣记录

栈~数制转换

C++学习

Python实现文件管理系统（重命名和删除）

栈~数制转换

pytorch学习3

python实现文件操作管理系统

C语言~结构回顾

分享广为流传的数据结构下的一首打油诗

HTML2

发表评论 取消回复

HTML2

发表评论取消回复