自学前端Day2

表单

• 表单域：一个包含所有表单控件和提示信息的框
• 表单控件/元素：男/女、是/否…
• 提示信息：姓名、年龄等
  

表单控件/元素

input

<input type=“属性值” /> 单标签，根据type属性值的不同来指定不同的控件类型：

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

radio&checkbox

<form>
      男：<input type="radio">&nbsp女：<input type="radio"><br>
      爱好：篮球<input type="checkbox">&nbsp 游泳<input type="checkbox">&nbsp 网球<input type="checkbox">
</form>

在前面的图片中可以看到，radio明明是单选按钮可是男和女都能选，解决办法是在input标签中添加一个name属性，并指定相同的值，这样就只能选一个了：

男：<input type="radio" name="gender" value="男">&nbsp女：<input type="radio" name="gender" value="女"><br>

此外，input还有其它属性值：

代码如下：

<form>
     用户名<input type="text" name="username" value="Please input name" maxlength="5"><br>
     密码<input type="password" name="pwd"><br>
     男：<input type="radio" name="gender" value="男" checked="checked">&nbsp女：<input type="radio" name="gender" value="女"><br>
     爱好：篮球<input type="checkbox" value="basketball" checked="checked">&nbsp 游泳<input type="checkbox" swimming>&nbsp 网球<input type="checkbox" value="tennis" checked="checked">
</form>

其中，name、value作用是给后台用的，你在姓名输入了文本，后台怎么知道哪个text是姓名的文本？就是用name来标识；value也是，选择了性别，要在相应的input标签中写入对应的值以便后台知道(在text中value是前端可以看见的)。
单选与复选框可以设置checked属性，目的是页面加载时就默认选中一项(比如说有的页面自动给你勾选同意什么什么协议)，但要注意单选按钮是多选一，所以只能给其中一个加checked，但复选框可以选多个。
maxlength是指输入字段中能输入的最大长度。

submit

将form中的表单元素里面的值提交至服务器，按钮上的文字由value决定。

<input type="submit" value="免费注册">

reset

点击后可以恢复至form初始的样子

<input type="reset" value="重置">

button

一个普通的按钮，一般和js搭配使用(例如发送短信验证码)

label

经常和input配合使用，前面在选比如说性别时，只有将鼠标放到那个小圆圈里才能选，label可以使鼠标放在男/女文字上也可以选，增加用户体验。

<label for="man">男:</label><input type="radio" name="gender" id="man">
<label for="women">女:</label><input type="radio" name="gender" value="女" id="women">

效果如下，现在直接点击男/女就能选了

下拉表单 select

文本域 textarea

当输入留言或评论时，可以用。