学习日记——表单的语法、运用和验证

1.语法

①邮箱

<form action="demo001.html">
            <table border="1px">
                <tr>
                    <td>请输入邮箱地址<input type="email" name="" id="" value="" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="提交" /></td>
                </tr>
            </table>
        </form>

type=”email”代表如果用户输入邮箱的地址不符合地址的规范，会导致当用户触发submit按钮之后，无法跳转到action中的HTML页面，并提示警告

②网址

<form action="demo001.html">
            请输入你的网址：<input type="url" /><br />
            <input type="submit" value="提交" />
        </form>

type=”url”,代表提交表单后，网址必须符合规范，否则会提示请输入网址

③数字

<form action="demo001.html">
            <input type="number" min="0" max="10" step="2" /><br />
            <input type="submit" value="提交" />
        </form>

（1）type=”number” 代表可以限制用户输入数字的范围，提交表单后，数字必须符合设置的要求，否则提示警告
（2）min：数字最小值
（3）max:数字最大值
（4）step：步长，每一次选择数值之间的步长

④滑块

<form action="demo001.html">
            <input type="range" min="0" max="10" step="3" /><br />
            <input type="submit" value="提交" />
        </form>

（1）type=”range” 代表可以限制用户输入数字的范围
（2）min：数字最小值
（3）max:数字最大值
（4）step：步长，每一次滑动数值之间的步长

⑤搜索框

搜索:<input type="search" name="" />

type=”search”，代表含义是 带有删除按钮的搜索框（删除按钮在搜索框内）

2.表单的高级运用

①隐藏域

<input type="hidden"  name="id" value="1001"/>

type=”hidden” 代表当前记录不需熬展现在当前行上，但是需要隐藏起来并发送后端服务器

②只读和禁用

<input type="text" value="123" readonly="readonly"/>
<input type="text" value="123" disabled="disabled" />

readonly 代表不可编辑，dsiable代表置灰效果且不可编辑

③表单元素的标注

<form action="">
        <label for="male">男:</label>
        <input type="radio" name="gender" value="1" id="male" /><br />
        <label for="female">女:</label>
        <input type="radio" name="gender" value="1" id="female" /><br />
        </form>

在input标签中加入id=”xx”  在label标签在加入for=”xx”

3.表单的初级验证

①进行验证的原因

减轻服务器的压力，同时也是为了安全性考虑。

②placeholder

 

搜索：<input type="search"placeholder="请输入关键词" />

 

 

特点1：input类型的文本框提供一种提示
特点2：可以描述文本框期待用户输入何种内容
特点3：提示默认显示，当文本框中输入内容时提示语消失
特点4：适合于input标签：text search url email password等

 

③required

 

搜索：<input type="search"placeholder="请输入关键词" />

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

特点2：适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型