HTML之表单标签、input标签、label标签、select标签

<form>

form 是发送用户输入数据到指定服务端地址

属性：

action:它的数据提交地址。?键=值(是查询参数的格式)

name：设置键。

target="_blank"： 新开一个窗口传递参数

method ：form表单传递数据的方式 （1）get请求:查询参数(数据)是通过url传递，传递速度比较快，传递的数据有限制，不太安全（2） post请求: 查询参数(数据)是通过body(请求体)传输,传递速度没有get快,传递的数据没有限制，相对比较安全。

label： form表单里面用的文本标签

enctype:数据post传输时，设置数据传输类型，普通或二进制，默认为application/x-www-form-urlencoded（文本）；如果要上传文件必须设置为multipart/form-data（将文件分割多块以二进制形式传输）

    <form action="https://baidu.com" target="_blank"> 
        <input name="zs">
        <input type="submit" > 
     </form>
 

<input>

form属性：

form 属性规定 input 元素所属的一个或多个表单。

form 属性的值必须是其所属表单的 id。

如需引用一个以上的表单，使用空格分隔的列表。

type属性

text :文本输入框,用户可以输入文本.input不写type属性text就是默认效果。

password :密码输入框,明文被隐藏.

button:按钮。

checkbox:复选框。

file:输入字段和“浏览”按钮，供文件上传。（accept指定显示文件类型；multiple允许用户上传多个文件 ctrl+点击要上传的文件）。

hidden:隐藏的输入文字。

image:图像形式的提交按钮。

radio:单选框，name值要保持一致才可实现单选。（如不指定value,选中时默认为on）。

reset:重置按钮，清除表单中所有数据。（value默认为重置）

submit:提交按钮，把表单的数据发送到服务器。（value默认为提交）

email: 限制用户输入必须为邮箱地址。

number: 限制用户输入必须为数字和e。（max设置最大值；min设置最小值；step设置步长）

range:范围控件。(min:最小值；max:最大值；value默认为一般）

url:只能输入网址格式。

date:限制用户输入必须为日期。

time：限制用户输入必须为时间。

week:限制用户输入必须为周。

month：限制用户输入必须为月。

datetime-local:限制用户输入必须为日期时间。

tel:限制用户输入必须为手机号码。

search:搜索框。

color：生成一个颜色选择表单。

其他属性：

name:名称（单、复选框名字要保持一致）。

maxlength:文本框输入大长度限制。

required :必填项，如果没有填写内容，不会把数据提交到action地址。

value :通过action地址传递到后端的值。

placeholder 提示信息，不会传递到后端的。

readonly: 只读。

disabled: 控件不可操作。

  <form id="form1" method="post" action="http://www.baidu.com">
        <p>
            <input type="text" name="wd" value="test" maxlength="5" disabled>
            <input type="text" name="wd" value="test" maxlength="5" readonly>

        </p>
        <p>
            <input type="password" name="pwd" placeholder="请输入密码：">
        </p>
        <p>
            <input type="radio" name="sex" value="girl" id="girl" checked><label for="girl">女</label>
            <input type="radio" name="sex" value="boy" id="boy"><label for="boy">男</label>
        </p>
        <p>
            <input type="checkbox" name="hobby" value="swim" id="swim"><label for="swim">游泳</label>
            <input type="checkbox" name="hobby" value="run" id="run" checked><label for="run">跑步</label>
            <input type="checkbox" name="hobby" value="listen" id="listen" checked><label for="listen">听歌</label>
            <input type="checkbox" name="hobby" value="dance" id="dance"><label for="dance">跳舞</label>
        </p>
        <p>
            <input type="email" placeholder="请输入邮箱地址">
            
        </p>
         <p>
            <input type="number" placeholder="请输入学号" min="2" max="8" step="0.5">
            
        </p>
         <p>
            <input type="file" accept="image/*" multiple>
        </p>
         <p>
            <input type="hidden" name="hidden" value="aaaa">
        </p>
         <p>
            <input type="range" name="range" min="0" max="50" value="20">
        </p>
        <p>
            <input type="url" name="url">
        </p>
        <p>
            <input type="tel" name="phone">
        </p>
        <p>
            <input type="color" name="color">
        </p>
         <p>
            <input type="date" name="date">
        </p>
        <p>
            <input type="reset">
            <input type="submit" value="注册">
            <input type="button" value="按钮">
            <input type="image" src="../images/1.jpg" alt="图片按钮" width="100">
        </p>
    </form>
    <input form="form1" name="search">

 

 

<label>

一般用于表单中

label的for属性可以关联 input 标签的id值。一般用在radio和checkbo比较多

for属性值要与相关元素的id属性值一样

 <input type="radio" name="sex" value="boy" id="boy">  <label for="boy">男 </label>&nbsp;&nbsp; 
 <input type="radio" name="sex" value="girl" id="girl">  <label for="girl">女 </label> 

<select>+<option>

下拉列表

属性

size:设显示选项的数量。

multiple:多选（ctrl+点击）。

<option>中定义属性：select="selected"时，当前项为默认选中项。

    <select name="num">
        <option value="one" selected>1</option>
        <option value="two">2</option>
        <option value="three">3</option>
    </select>