Web前端27：表单元素

表单元素是一系列元素，主要用户收集用户数据。

<textarea>元素

文本域，也叫多行文本框。

<p>
    请填写简介：
    <textarea cols="30" rows="10">默认存在的文字</textarea>
</p>

cols表示组多有多少列（一行最多有多少个字母），rows表示最多有多少行。不过建议使用CSS来控制<textarea>的大小。
<textarea>和</textarea>之间的文字是默认存在的文字，而不是value属性的取值。

<button>这个元素是HTML4.01版本出来的，已经有10多年的历史了。所以兼容性上问题不大。
type属性表示按钮的类型，可以取值reset、submit（默认值）、button，和<input>的一样。
<button>里可以放很多元素，甚至放个<video>都行，所以可以实现丰富的效果。
<input>也能加图片，不过不够灵活，加了图片就加不了别的了。而<button>随便加多少都行。

<input type="image" src="./img/button.webp" style="width:50px;">

<button type="button">
    <img src="./img/button.webp" style="width:50px;">
    <span>点击进入</span>
</button>

一些常用来配合表单元素的元素

<label>

这是一个普通元素，经常配合多选单选框使用。
例：

性别：
<input name="gender" type="radio">男
<input name="gender" type="radio">女

这样的情况，点击文字是无法选中单选框的：

而我们熟悉的情况是点击文字也能选中单选框，可以使用<label>元素实现这个效果：

性别：
<input id="radio-Male" name="gender" type="radio">
<label for="radio-Male">男</label>   

<input id="radio-Female" name="gender" type="radio">
<label for="radio-Female">女</label>

这时点文字也可以选中了。
通过<label>的for属性关联对应id的表单元素，这种关联叫做显式关联。
相应地也有隐式关联，意思是<label>里套着表单元素：

性别：
<label>
    <input name="gender" type="radio">男
</label>   

<label>
    <input name="gender" type="radio">女
</label>

<datalist>

数据列表。该元素本身不会显示到页面，通常和普通文本框配合使用。
例：

<p>
    请输入你常用的浏览器：
    <input list="brwoser" type="text">
</p>
<datalist id="brwoser">
    <option value="Edge">Edge浏览器</option>
    <option value="Chrome">谷歌浏览器</option>
    <option value="Firefox">火狐浏览器</option>
    <option value="Opera">欧鹏浏览器</option>
</datalist>

在<input>中通过list属性关联到<datalist>的id。

看着像百度的搜索建议，但实际上不是用这个做的。因为这种是静态的，满足不了用户需求。百度是动态的，实时更新的。而且这种写法兼容性不太好。

<form>

通常将整个表单元素放置到<form>的内部，也就是说它是用来包含其他表单元素的。
作用是当提交表单时，将form元素的表达内容以合适的方式提交到服务器。
form元素对开发静态页面没什么意义，在动态页面上很重要。
例：

<form action="https://www.baidu.com/" method="get">
    <p>
        账号：
        <input type="text" name="login-id">
    </p>
    <p>
        密码：
        <input type="password" name="login-passwd">
    </p>
    <button type="submit">提交</button>
</form>

action表示提交给谁，填链接地址，这里我们填百度。（当然百度是不会理我们的数据的）
method表示提交方式，通常有两个取值：get和post。
<form>内的表单元素必须写上name属性，

点击提交后：

跳转到了百度，并且地址栏为：

https://www.baidu.com/?login-id=123456&login-passwd=654321

如果action的链接地址设置了相应的数据处理，就可以做出一些响应。

<fieldset>

field表示字段，set表示集合，可以认为是将表单分组。

<form action="">
    <h1>修改用户信息</h1>
    <fieldset>
        <p>
            账号
            <input type="text">
        </p>
        <p>
            密码
            <input type="password">
        </p>
    </fieldset>
    
    <fieldset>
        <p>
            姓名
            <input type="text">
        </p>
        <p>
            城市：
            <select name="" id="">
                <option value="">Lorem.</option>
                <option value="">Omnis?</option>
                <option value="">Provident?</option>
                <option value="">Sapiente!</option>
            </select>
        </p>
    </fieldset>
    
    <p>
        <button>提交修改</button>
    </p>
</form>

可以看到表单被框框隔开了，在逻辑上分了组。
当然这样的形式通过CSS也能实现，不过语义上<fieldset>更胜一筹。

表单状态

有两种布尔属性：

readonly：表示是否只读。一般的网络账号就是只读的，不能随便修改。

disabled：是否禁用。会改变表单显示样式。

账号
<input type="text" value="123456" readonly disabled>
<br>
密码
<input type="text">

Web前端27：表单元素

<input>元素

<input>的几个常见属性

type

value

placeholder

<type>的常见取值

text

password

date

range

color

number

checkbox

radio

file

按钮

<select>元素

简单使用

下拉列表的分组