Html表单元素(DAY6)

我们在上一篇文章中介绍了input的text,Password,button,radio,checkbox,date元素
这篇文章将介绍其他表单元素，了解各个元素和属性在网页上的作用。

• 认识各项input元素

Submit(送出按钮):将表单资料送回服务器端
Reset(重设按钮):将表单元素清空或重回预设值
File(档案上传按钮):可以利用accept属性指定可上传的档案类型
Email(电子邮件输入框)
Tel(电话号码输入框)

<form>
    <h1>报名资料填写</h1><hr />
    报名档案:<input type="file" name="file" accept=".pdf" autofocus><p>
    <!--accept属性为限制使用者上传的档案类型-->
    电子邮件:<input type="email" name="mail" autocomplete="off" required></p>
    电话号码:<input type="tel" name="tel" placeholder="请填写09开头" required>
    <p >
    <input type="submit" value="submit" name="submit">
    <input type="reset" value="reset" name="reset"/>
    </p>
</form>

补充:
在上面的范例中可以看到几个属性:
Autofocus:网页开启後自动聚焦此表单元素，让使用者注意此元素
Autocomplete:是否要记得并自动填入之前表单元素的输入值，off/on分别为关闭/开启
Required:设定为必填，若未输入将会有提示讯息，且无法送出表单
Placeholder:输入的提示讯息，不会将此提示讯息设定成预设值

• 认识textarea(文字区域)元素

常用在留言板等功能，提供多行文字的输入框
<textarea name="" rows="" cols=""></textarea>
Rows:设定输入框预设需要多少列
Cols: 设定输入框预设需要多少行

<form>
    <h1>留言板</h1><hr />
    <textarea name="area" rows="8" cols="20" placeholder="右下角可调整输入框大小喔"></textarea>
</form>

• 认识select/option(下拉式)元素

<select name="" size=2 multiple>
    <option></option>
    <option></option>
    <option></option>
</select>

size:在选框中出现多少个项目，其他项目可经由下拉杆选取
multiple:可复选

<form>
   请选择:
    <select name="select" size=2 multiple>
        <option>dog</option>
        <option>cat</option>
        <option>horse</option>
    </select>
</form>

结语

这篇文章介绍了表单的input、textarea、select/option元素，html的介绍和认识也到这边告一个段落，接下来後面的几篇文章将进入用来美化、排版网页的CSS，让网页的样子变得更有设计感。