关于form表单的灵活运用

1.首先form表单后面常跟着的是：

<form action=""></form>  //注意这是存放于body部分的，请不要放错地方了。

2.action=""后面存放的是你想要跳转的相对路径，！！！记住是相对路径，而不是绝对路径，这样别人才可以看到，否则别人无法打开你跳转的地方。

3.form表单一般与input连用。 如：

<form action=""><input type="text"></form>

这就是一个简单的form表单中运用一个text文本。下面我们来见识下form表单中input常用的属性：

（1）.text-文本类型。

如：<input type="text">这表示一个文本框，既可以输入中文也可以输入数字。

（2）.password-密码类型。

如：<input type="password">这表示我们可以进行输入的密码框，

当然如果你想要它有初始值可以这样写：

<input type="password" name="" value="1234">这样你就会得到一个自带初始值的密码框。

（3）.button-按钮类型

如：<input type="button">它是一个纯粹的按钮，非常纯粹，不带一点杂志。

（4）.radio-单选类型

如：<input type="radio" name="radio">男

<input type="radio" name="radio">女

<input type="radio" name="radio">坤坤

它可以让我们运用鼠标进行自己选择。

（5）.checkbox-这是多选类型

如：<input type="checkbox" name="checkbox">唱

<input type="checkbox" name="checkbox">跳

<input type="checkbox" name="checkbox">rap

如果我要全选的话，radio就无法实现，但运用checkbox可以实现。

（6）.image-这是图像类型

如：<input type="image" src="">

src后加你所需要添加的图片的相对路径

（7）.submit-这是提交按钮

如： <input type="submit">

在许多网页填资料时你会看见这个按钮。

（8）.file-这是个文件按钮，也就是可以上传你的文件。

如：<input type="file">

（9）.date/time/datetime-local这三个第一个是单指日期，第二个是单指时间，第三个是包含年月日时间

<input type="date">

<input type="time">

<input type="datetime-local">

(10).email-这是邮箱类型，这样你就可以进行邮箱的填写

如：<input type="email">

（11）.reset-这是复位按钮

<input type="reset">

2.下面我们来到许多常用可以与上面连用的属性

（1）.readonly-这个属性是可以让你只能读取文字段，不能进行任何修改

（你可以理解为锁定了）

如：<input type="text" name="username" value="两年半的练习生" readonly>

这样“两年半的练习生”就被锁定了。

（2）.autofocus-这是默认光标的位置，就像你平常登QQ首先光标自动在账号栏，

便是运用了autofocus这个属性

如：<input type="text" name="username" autofocus>

（3）.checked-这便是默认选择

如：<input type="radio" name="radio" checked>男

<input type="radio" name="radio">女

这便是默认选择男

（4）.required-这是不能空白提交的属性

如：<input type="email"  required>