创建文本框的步骤及一些常见的知识点

创建文本框的步骤：

1：如果需要，输入用于让访问者识别文本的标签，

例如<lable for="idlable">LastName:</lable>,

其中idlable匹配第（4）步中的标签。

2：输入<input type="tex".

3:输入name=”datename”,这里的datename是用于让服务器（和脚本）识别输入数据的文本

4：如果在第一步中创建了lable，输入id="idlable"，这里的idlable跟第（1）步中for属性文本一样，尽管这并不是必须的。

5：如果需要，输入value="default"，这里的default是这个字段中最初显示的数据，如果访问者没有输入别的内容的话，这一数据将被发送到服务器。

6:如果需要，输入placeholder="hinttext"，这里的hinttext用于指导用户的输入，当input获取焦点的时候，这些文本就会消失。

7：如果需要，输入required="requried"，表示仅在这个字段有值得情况下才能提交表单。

8：如果需要，输入autofocus或者autofocus="autofocus"(在HTML5中这两种方法都可以)，

input元素在页面加载时会默认获得焦点。

9：如果需要，通过输入size="n"定义文本框的宽度，以字符为单位，也可以使用css设置输入框的宽度

10：如果需要，输入maxlength="n",这里的n是该文本框允许输入最大字符数

11：最后，输入>或者输入/>（参见最后一条提示）

 

 

有时候在我们输入了一些数据后 firefox会根据先前的输入内容来提供相应的文字提示，如果不想要提示的话可以加上autocomplete="off"

 

提示：

文本框大小默认值是20.不过访问者可以输入更多的字符，知道到达maxlength属性规定的限制。如果需要更大的可以容纳好几行的文本字段，最好使用textarea属性。

 

为表单组件添加说明标签

标签（lable）是用来描述表单字段用途的文本。

lable有一个属性for。如果for的值于一个表单字段的ID的值相同，该lable就与该字段显示的关联起来了

 

id for和name属性的命名习惯

对于包含了多个单词的值，我们在for和id中使用连字符（-），在name中使用下划线(_)来连接

无论是哪种方法，一定要保证for和id的值是一样的。

 

创建密码框：
创建密码框的步骤：

1. <lable for="idlable">PassWord</lable>
2. <input type="passwoed"
3. 输入id="idlabel"一定要和第一步的for值相同。
4. 输入name="datename" 这里的datename是用于让服务器识别数据的文本。
5. 通过输入size="n" 来定义密码框的长度。
6. 如果需要输入required
7. 如果需要 输入autofouce
8. 输入/>

 

pattern属性要求只接受一下格式的输入，可以找到相关的正则表达式来控制其填写方式,记得用placeholder=”“来提示用户输入标准的输入格式

 

创建单选按钮的步骤

1：type="radio"

2：同一个组的单选框必须保持name的值相等，这样才能确保同一个组的单选框同时只能有一个选项被选中

<lable for="music">音乐:</lable>
<input  type="radio" id="music" name="choose" value="music" >
<lable for="sport">体育:</lable>
<input  type="radio" id="sport" name="choose" value="sport" checked>
<lable for="Art">艺术:</lable>
<input  type="radio" id="art" name="choose" value="Art">

设置checked属性：代表该项为默认项

 

创建复选框的步骤

1：<input type="checkbox" 

2 : 输入name="boxset"这里的boxset用于识别发送至服务器的数据，同时用于将多个复选框联系在一起。

 

创建选择框

例子：

<lable for="make_choose">请选择:</lable>
<select id="make_choose" name="make_choose" size="#">
<option value="one">1</option>
<option value="two" selected>2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
</select>

输入selected就会显示出做开始的默认值

 

创建文本区域：

例：

<lable for="textarea">please introduce youself:</lable>
<textarea id="textarea" name="text_area" cols="#" rows="#"></textarea>

   

让访问者上传文件：

<form method="post" enctype="multipart/form-data" action="#">
<lable for="picture">Picture:</lable>
<input type="file" id="picture" name="picture"/>
<p>don't more than 15px</p>
</form>