html总结5 | 怪默

html

web

发布日期: 2020-07-21

作者: 怪默

文章字数: 1.1k

阅读时长: 5 分

阅读次数:

表单

HTML 表单用于搜集不同类型的用户输入。

`<form></form>`

<form>标签定义 HTML 表单
action 属性定义在提交表单时执行的动作。
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
Name 属性：如果要正确地被提交，每个输入字段必须设置一个 name 属性。

`<input/>`

文本域

框默认为20字符

<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>

密码域

密码隐藏不可见，以星号或圆点替代

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>

单选按钮

同一组的单选按钮，name 取值一定要一致这样同一组的单选按钮才可以起到单选的作用。
- ```
Male

Female
```

复选框

同一组的复选框，name 取值一定要一致这样同一组的单选按钮才可以起到单选的作用。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮

<form name="input" action="提交至" method="get">
<input type="submit" value="Submit">
</form>

<form action="">
<input type="button" value="Hello world!">
</form>

下拉列表

<select> 元素定义下拉列表：
<option>元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
通过添加 selected属性来定义预定义选项。

无预选值    
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

带预选值
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

预定义选项列表

用户会在他们输入数据时看到预定义选项的下拉列表。
（<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性)

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist> 
</form>

type所有类型

button,checkbox,file,hidden ,image,password,radio,reset,submit,text

实例

带边框的表单

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>    
</form>

<fieldset>标签可将表单内的相关元素分组。(生成边框)
<legend> 标签为 fieldset 元素定义标题。

利用表单发送电子邮件

  <form action="mailto:someone@example.com" method="post" enctype="text/plain">
  E-mail:<br>
  <input type="text" name="mail" value="your email"><br>
  Comment:<br>
  <input type="text" name="comment" value="your comment" size="50"><br><br>
  <input type="submit" value="发送">                  
  </form>

脚本

`<script></script>`

如果浏览器压根没法识别 <script>标签，那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。